Scribd
Upload
106 views5 pages

Installing Material To Angular

The document discusses several key concepts in Angular including data binding, directives, pipes, dependency injection, routing, lazy loading, global CSS, and custom components. It also provides instructions on installing Angular and additional libraries like Bootstrap and Material, describes Angular CLI commands, component lifecycles, component communication, routing, and different types of directives.

Uploaded by

inVision Software Solutions
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
106 views5 pages

Installing Material To Angular

The document discusses several key concepts in Angular including data binding, directives, pipes, dependency injection, routing, lazy loading, global CSS, and custom components. It also provides instructions on installing Angular and additional libraries like Bootstrap and Material, describes Angular CLI commands, component lifecycles, component communication, routing, and different types of directives.

Uploaded by

inVision Software Solutions
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 5

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>

You might also like