IMP Concepts :
[Link] binding two way and one way
[Link] and
[Link]
[Link] injection
[Link] and
[Link] loading
[Link] css
[Link] components
[Link]
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 [Link]
next open [Link] under build -> styles -> add this -> “,/node_modules
/bootstrap/dist/css/[Link]”
And add below to scripts
"scripts": [
"./node_modules/bootstrap/dist/js/[Link]",
"./node_modules/popper/[Link]",
"./node_modules/jquery/dist/jquery..[Link]"
After update we need to restart the application
Installing Material to Angular :
Cmd for this => ng add @angular/material
Angular CLI cmds
[Link] generate component <component_name>
[Link] generate module <module_name>
[Link] generate pipe <pipe_name>
[Link] generate directive <directive_name>
[Link] is a class, to generate it use --type option like this:
ng generate class hero --type=model
will result in:
[Link]
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 [Link] 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()
[Link] lifecycle hooks we want to use first import it in the class
[Link] the implements interface
[Link] 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>{{[Link]}}</p>
<p> {{[Link]}}</p>
<p>{{[Link]}}</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>
