Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
8 views

Angular Part2

angular

Uploaded by

Selvakumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views

Angular Part2

angular

Uploaded by

Selvakumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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