100 days Angular

100-days-angular.md

100 days Angular

Component

Lifecycle

Encapsulation

ViewEncapsulation.Emulated

encapsulation: ViewEncapsulation.Emulated, // this is default view encapsulation

ViewEncapsulation.None

encapsulation: ViewEncapsulation.None,

ViewEncapsulation.ShadowDom

encapsulation: ViewEncapsulation.ShadowDom,

It does not effect by stylesheets in this page

If there is no styles or styleUrls in ViewEncapsulation.Emulated mode, this component will automatically set to ViewEncapsulation.None

Component Interaction

Parent to Child

Input

Template Reference

Parent interacts with child using local variable

Component Ref

ElementRef

Parent and children communicate using a service

Why unsubscribe unsubscription is important?

Let's take a look at this example

Everytime, user move to another screen and go back to the screen contain this component. Number of observers increased!

So how we fixed it? Easy peasy!

Component Styles

:host {
  font-style: italic;
}

:host(.active) {
  font-weight: bold;
}

:host-context(.active) { // same as :host()
  font-style: italic;
}

// The following example targets all <h3> elements, from the host element down through this component to all of its child elements in the DOM.

:host ::ng-deep h3 {
  font-style: italic;
}

/deep/ ~ ::ng-deep >>>

How many ways?

Inline

Style files in component metadata

Template Inline Style

Template link tags

CSS @imports

Global styles

Component Communication

1. Open Modal ( Modal is children Component )

Event Listener

Key Press Listener

FullList Event

https://github.com/angular/angular/blob/master/packages/compiler/src/schema/dom_element_schema_registry.ts#L78

https://www.w3.org/TR/DOM-Level-3-Events-key/#named-key-attribute-values

Search "click" or "keypress"

Parent

Content Projection

Content projection is a pattern in which you insert, or project, the content you want to use inside another component

Single-slot content projection

Multi-slot content projection

Conditional content projection

ng-template

ng-container

Template

Directives

Built-in attribute directives

NgClass: Adds & Removes Set of CSS Classes

NgStyle: Adds & Removes Set of HTML Styles

NgModel: Adds two-way data binding to an HTML form element.

Built-in structural directives

NgIf

NgFor

Without trackby

When the entire list has been prefetch, entire component will be rerendered

With tracky

Only the item changed will be rerendered

NgSwitch(attr), NgSwitchCase(structural), ng-container

Custom Attribute Directive

Angular pass callback function to child component as input

methodName.bind(this, args);