IMP Concepts :
1.data binding two way and one way
2.directives and
3.pipes
4.dependency injection
5.routing and
6.lazy loading
7.global css
8.custom components
9.Interceptors
Angular Notes
For install angular npm install -g @angular/cli
Create New Application ng new <project Name>
To Run the Application ng serve
NPM Package Manager
npm install bootstrap jquery popper –save for bootstrap4
npm install bootstrap popper – save for bootstrap 5
the installed files u will find at packages.json
next open angular.json under build -> styles -> add this -> “,/node_modules
/bootstrap/dist/css/bootstrap.min.css”
And add below to scripts
"scripts": [
"./node_modules/bootstrap/dist/js/bootstrap.min.js",
"./node_modules/popper/index.js",
"./node_modules/jquery/dist/jquery..min.js"
After update we need to restart the application
Installing Material to Angular :
Cmd for this => ng add @angular/material
Angular CLI cmds
1.ng generate component <component_name>
2.ng generate module <module_name>
3.ng generate pipe <pipe_name>
4.ng generate directive <directive_name>
5.model is a class, to generate it use --type option like this:
ng generate class hero --type=model
will result in:
hero.model.ts
What Module Consist :
- Declarations : this is where we will add all the components of the module
- Imports : we can import module inside a module
- Providers : service that we need will be injected here
- Bootstrap : what is the first component , the module should load here
- Exports : is to export and expose the component outside of the module.
Components
Cmd for creating component ng g component <component_name>
Component decorator inside the component.ts file.
Selector : unique identifier for the component
=> like id of the component
=> using this selector we will use the component
templateUrl => HTML Code
styleUrls => style of the component
LifeCycleHooks 8 :
ngOnChanges()
ngOnInit()
ngDoCheck()
ngAfterContentInit()
ngAfterContentChecked()
ngAfterViewInit()
ngAfterViewChecked()
ngOnDestroy()
1.Whichever lifecycle hooks we want to use first import it in the class
2.Extends the implements interface
3.Implement the method.
Component Communication :
Routing :
Router-outlets
Router module
Named router module
<Router-outlets name=”route1”></Router-outlets>
<Router-outlets name=”route2”></Router-outlets>
=> {path:’cam’,Component:CameraComponent,outlet : ‘outlet-name we
defined’}
Child routing
{
path: '', component: AppLayoutComponent, children: [
{ path: 'users-list',canActivate: [AuthGuard], component:
UsersListComponent, data: { permittedRoles: ['ROLE_ADMIN'] } },
{ path: 'roles-list', canActivate: [AuthGuard], component:
RolesListComponent, data: { permittedRoles: ['ROLE_ADMIN'] }},
{ path: 'privileges-list', canActivate: [AuthGuard], component:
PrivilegesListComponent, data: { permittedRoles: ['ROLE_ADMIN'] } },
{ path: 'hd-config', canActivate: [AuthGuard], component:
CameraConfigComponent, data: { permittedRoles: ['ROLE_IT_OPS']}}
]
}
Sending data over the routing
ngOnChanges() - Responds when Angular sets/resets data-bound input properties.
ngOnInit() - Initialize the directive/component after Angular first displays the
data-bound properties and sets the directive/component's input properties/
ngDoCheck() - Detects and acts upon changes that Angular can't or won't detect on its
own.
ngAfterContentInit() - Responds after Angular projects external content into the
component's view.
ngAfterContentChecked() - Respond after Angular checks the content projected into
the component.
ngAfterViewInit() - Respond after Angular initializes the component's views and child
views.
ngAfterViewChecked() - Respond after Angular checks the component's views and
child views.
ngOnDestroy - Cleanup just before Angular destroys the directive/component.
String interpolation uses the double curly braces {{ }}
Property binding uses the square brackets [ ]
event binding is done using "( )"
Types of directives
Component directives
These form the main class in directives. Instead of @Directive decorator we use
@Component decorator to declare these directives. These directives have a view, a
stylesheet and a selector property.
Structural directives
These directives are generally used to manipulate DOM elements.
Every structural directive has a ‘ * ’ sign before them.
<div *ngIf="isReady" class="display_name">
{{name}}
</div>
<div class="details" *ngFor="let x of details" >
<p>{{x.name}}</p>
<p> {{x.address}}</p>
<p>{{x.age}}</p>
</div>
<span *ngIf=”show; then ifBlock else elseBlock”></span>
<ng-template #ifBlock>
<h1> IF BLOCK </h1>
</ng-template>
<ng-template #elseBlock>
<h1> ELSE BLOCK </h1>
</ng-template>
Switch Case
<div [ngSwitch]=”color”>
<h1 *ngSwitchCase=”’red’”>Red Color</h1>
<h1 *ngSwitchCase=”’green’”>Green Color</h1>
<h1 *ngSwitchDefault>Default Color</h1>
</div>
