parent.component.ts
parentElements = [{type:'server',name:'TestServer',content:'Just a Test!'}];parent.component.html
<app-child [childElement]="parentElements"></app-child>child.component.ts
@Input() childElement:{type: string, name:string, content: string}OBS: If you want to access the value in child.component.ts, see ContentChild in this guide.
parent.component.html
<app-child> <p>This will be shown in the HTML of the clild.component</p> </app-child>child.component.html
<ng-content></ng-content> <!-- Everything inner the app-child tag will be shown here -->child.component.ts
@Output() childElement = new EventEmitter<{name:string, surname:string}>();
this.childElement.emit({
name: 'Felipe',
surname: 'Tartarotti'
});parent.component.html
<app-cockpit (childElement)="parentReceives($event)"></app-cockpit>parent.component.ts
parentReceives(personData:{name:string, surname:string}) {
console.log('Name': personData.name);
console.log('Surname': personData.surname);
}
oneComponent.component.ts
import { BetweenService } from '../between.service';
export class OneComponent {
constructor(private betweenService: BetweenService) {}
sendEvent(status: string) {
this.betweenService.statusUpdated.emit(status); //emit the string called status to the service
}
}between.service.ts
statusUpdated = new EventEmitter<string>();twoComponent.component.ts
import { BetweenService } from '../between.service';
export class TwoComponent {
constructor(private betweenService: BetweenService) {
this.betweenService.statusUpdated.subscribe( //receives the event from the service
(status: string) => alert('New Status: ' + status)
);
}
}oneComponent.component.ts
import { BetweenService } from '../between.service';
export class OneComponent {
constructor(private betweenService: BetweenService) {}
sendEvent(status: string) {
this.betweenService.statusUpdated.next(status); //emit the string called status to the service
}
}between.service.ts
import { Subject } from 'rxjs';
statusUpdated = new Subject<string>();
//statusUpdated = new BehaviorSubject({});twoComponent.component.ts
import { BetweenService } from '../between.service';
export class TwoComponent {
constructor(private betweenService: BetweenService) {
private activatedSub: Subscription;
this.activatedSub = this.betweenService.statusUpdated.subscribe(status => {
alert('New Status: ' + status)
});
ngOnDestroy(): void {
this.activatedSub.unsubscribe(); //It's important to unsubscribe to avoid memory leaks.
}
}
}ngOnChanges ---> Called after a bound input property changes
ngOnInit ---> Called once the component is initialized
ngDoCheck ---> Called during every change detection run
ngAfterContentInit ---> Called after content (ng-content) has been projected into view
ngAfterContentChecked ---> Called every time the projected content has been checked
ngAfterViewInit ---> Called after the component’s view (and child views) has been initialize
ngAfterViewChecked ---> Called every time the view (and child views) have been checked
ngOnDestroy ---> Called once the component is about to be destroyed
#ViewChild - Light DOM
child.component.html
<p #text> This will be in child.componente.ts</p>child.component.ts
@ViewChild('text', {static: true}) text: ElementRef;
ngAfterViewInit(){
console.log(this.text); //This will be in child.componente.ts
}#ContentChild - Shadow DOM
parent.component.html
<app-child> <p #text> This will be in child.componente.ts</p> </app-child>child.component.html
<ng-content></ng-content> <!-- Everything inner the app-child tag will be shown here -->child.component.ts
@ContentChild('text', {static: true}) text: ElementRef;
ngAfterViewInit(){
console.log(this.text); //This will be in child.componente.ts
}*FOR
<div *ngFor="let item of items; let i = index"></div>*IF
<div *ngIf="condition"></div>- SWITCH
<div [ngSwitch]="value">
<p *ngSwitchCase="5">Value is 5</p>
<p *ngSwitchCase="10">Value is 10</p>
<p *ngSwitchCase="100">Value is 100</p>
<p *ngSwitchDefault>Value is Default</p>
</div>highlight.directive.ts
import {Directive,Renderer2,OnInit,ElementRef,HostListener,HostBinding,Input} from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective implements OnInit {
@Input() defaultColor: string; //receives the yellow color
@Input() highlightColor: string; //receives the red color
@HostBinding('style.backgroundColor') backgroundColor: string; //atribute selector we want to change
constructor(private elRef: ElementRef, private renderer: Renderer2) { }
ngOnInit() {
this.backgroundColor = this.defaultColor; //initiate with defaulColor
}
@HostListener('mouseenter') mouseover(eventData: Event) { //activate when mouse is over
this.backgroundColor = this.highlightColor;
}
@HostListener('mouseleave') mouseleave(eventData: Event) { //activate when mouse leave
this.backgroundColor = this.defaultColor;
}
}app.component.html
<p appHighlight defaultColor="yellow" highlightColor="Red">Style me with a better directive!</p>unless.directive.ts
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[appUnless]'
})
export class UnlessDirective {
@Input() set appUnless(condition: boolean) { //create the name of the Directive
if (condition) {
this.vcRef.createEmbeddedView(this.templateRef); //Show the elements
} else {
this.vcRef.clear(); //Hide the elements
}
}
constructor(private templateRef: TemplateRef<any>, private vcRef: ViewContainerRef) { }
}app.component.html
<div *appUnless="condition">
<p>Show if condition is True</p>
</div>```javascript private firstObsSubscription: Subscription;
const customIntervalObservable = Observable.create(observer => {
let count = 0;
setInterval(() => {
observer.next(count);
if (count === 5) {
observer.complete();
}
if (count > 3) {
observer.error(new Error('Count is greater 3!'));
}
count++;
}, 1000);
});
this.firstObsSubscription = customIntervalObservable.pipe(filter(data => { //SUBSCRIBE WITH OPERATORS
return data > 0; //FILTER, it has to return true or false to cotinuos
}), map((data: number) => { // MAP, data can be treated before cotinuos
return 'Round: ' + (data + 1);
})).subscribe(data => {
console.log(data);
}, error => {
console.log(error);
alert(error.message);
}, () => {
console.log('Completed!');
});
this.firstObsSubscription = customIntervalObservable.subscribe(data => { //SUBSCRIBE WITHOUT OPERATORS
console.log(data);
}, error => {
console.log(error);
alert(error.message);
}, () => {
console.log('Completed!');
});
ngOnDestroy(): void {
this.firstObsSubscription.unsubscribe(); // Unsubscribe to avoid memory leaks
}
app.component.ts
public name = "Felipe Tartarotti" //Property receives the stringapp.component.html
<div>{{ name | shorten : 6 }}</div> //Property is placed right beside the pipe-->
//ADD ":" and the value to send other property--> app.component.html (output)
<div>Felipe</div> shorten.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'shorten'
})
export class ShortenPipe implements PipeTransform { //Value receives the property name and
//Limit receives the number ->>> (shorten : 6)
transform(value: any, limit: number) {
if (value.length > limit) {
return value.substr(0, limit);
}
return value; //Return the value with 6 characteres
}
}Pipes can be chained and they will take efect from left to rigth
{{property | date:"fullDate" | uppercase}}
{{today | date | uppercase | slice:0:4}}