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.
