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>