Scribd
Upload
6 views

Angular Part2

angular

Uploaded by

Selvakumar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views

Angular Part2

angular

Uploaded by

Selvakumar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

View encapsulation:

CSS style components are encapsulated in the view component and it


not affect other applications.

Three types:
Viewencapsulation.none
Viewencapsulation.emulated
Viewencapsulation.shadowDom

Viewencapsulation.emulated:
 The unique attribute id is used.
 Which helps in achieving view encapsulation the parent and
child components of same tag are separated by unique id.
Viewencapsulation.None:
 In component by assigning encapsulation
=ViewEncapsulation.None
 There be no unique id hence if we apply style to parent
component it also reflected in child component.
Viewencapsulation.ShadowDom:
 First makes the particular style in parent to global in style.css
then It get applied to all components
 But in particular component declaring encapsulation
=Viewencapsulation.ShadowDom then it makes the particular
component to be separate from the other Dom. And it get
affected to the style from global style.
ng-content :
 which is used for making the content to be dynamically added to
it.
 Used for code reusability.

<!-- app-child.component.html -->


<ng-content></ng-content>

<!-- app-parent.component.html 
<div>

<app-child>
<p>this is 1</p>
</app-child>

<app-child>t
<p>this is 2</p>
</app-child>

<app-child>
<p>this is 3</p>
</app-child>

</div>

 Projected content is replaces the ng-content.


ANGULAR LIFE CYCLE HOOKs:

 These are the methods invoked in directives or components.


 Which creates, changes, destroy content in them.

Hooks:
These all called order wise.
First Constructor called it is not a hook.
1. ngOnChange - whenever input bound property @input of
component or directive changes.

2. ngOnInit - any initialization logic changes. Only first time


change detection.
3. ngDoCheck - check change on each detection cycle. Even
no change when event happen.

4. ngAfterContentInit - after the child and view component


are added. First time change detection in component only.

5. ngAfterContentChecked - after the child and view


component are added. Each time change detection in
component only.

6. ngAfterViewInit - called after the view content get


initialized. First time change detection in component only.

7. ngAfterViewChecked - called after the view content get


initialized. Each time change detection in component only.

8. ngOndestroy - destroy the component or directive. When


ngIf fails. It is the correct place to clean observables and
detach event handlers to avoid memory leaks.
@ContentChild decorator:

Which is used to directly access the projected data in the other


component.
Syntax same as view child component.

app.component.html

<div>
<app-child>
<p #para>this is old para</p>
</app-child>
</div>

app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ChildComponent } from './child/child.component';

@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet,ChildComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'contentchilddecorator';
}

child.component.html

<button (click)="call()"> submit</button>


<ng-content></ng-content>

child.component.ts

import { CommonModule } from '@angular/common';


import { Component, ContentChild, ElementRef } from
'@angular/core';

@Component({
selector: 'app-child',
standalone: true,
imports: [CommonModule],
templateUrl: './child.component.html',
styleUrl: './child.component.css'
})
export class ChildComponent {
@ContentChild('para')
paragraph!: ElementRef;
call()
{
this.paragraph.nativeElement.textContent="this is new para";
}
}
CUSTOM ATTRIBUTE DIRECTIVE:
Creating attribute customly like built in directives ngStyle, ngClass.

import { Directive, ElementRef } from "@angular/core";


@Directive(
{
selector:'[setbackground]',
standalone:true
}
)
export class SetBackgroundDirective
{ private element: ElementRef ;
constructor(el:ElementRef)
{
this.element=el;
}
ngOnInit()
{
this.element.nativeElement.style.backgroundColor='green';
}

<div>
<app-child>
<p #para setbackground>this is old para</p>
</app-child>
</div>
Renderer2 :

Disadvantages of native element: It has the direct access if DOM


element.

 The Renderer2 allows us to manipulate the DOM elements,


without accessing the DOM directly.
 It provides a layer of abstraction between the DOM element
and the component code.

You might also like