Instantly share code, notes, and snippets.

View 5.ts
const ref = this.factory.create(this.injector, null, 'dynamic-in-body');
this.app.attachView(ref.hostView);
View 3.ts
@Input() set name(name: string) {
this._name = name;
this.cdr.detectChanges();
}
get name() {
return this._name;
}
constructor(private cdr: ChangeDetectorRef) {}
View 2.ts
ngOnInit() {
const factory = this.fr.resolveComponentFactory(HelloComponent);
const ref = this.vcr.createComponent(factory);
ref.instance.name = 'World';
setTimeout(() => {
ref.instance.name = 'Netanel';
ref.injector.get(ChangeDetectorRef).markForCheck(); // or detectChanges()
}, 3000);
}
View 1.ts
ngOnInit() {
const factory = this.fr.resolveComponentFactory(HelloComponent);
const ref = this.vcr.createComponent(factory);
ref.instance.name = 'World';
setTimeout(() => {
ref.instance.name = 'Netanel';
ref.changeDetectorRef.detectChanges()
}, 3000);
}
View hello-onpush.component.ts
@Component({
selector: 'hello',
template: `<h1>Hello {{name}}!</h1>`,
changeDetection: ChangeDetectionStrategy.OnPush <========
})
export class HelloComponent {
_name;
@Input() set name(name: string) {
this._name = name;
View ex.compoenent.ts
import { untilDestroyed } from 'ngx-take-until-destroy';
ngOnInit() {
const factory = this.fr.resolveComponentFactory(HelloComponent);
const ref = this.ref.createComponent(factory);
ref.instance.name = 'World';
ref.instance.someOutput.pipe(untilDestroyed(this)).subscribe(...) <======
}
View hello.component.ts
@Component({
selector: 'hello',
template: `<h1>Hello {{name}}!</h1>`
})
export class HelloComponent {
_name;
@Input() set name(name: string) {
this._name = name;
}
View search-432.html
<searchable-container [searchTerm]="searchControl.value"
#container="searchableContainer"> <============
Result: {{container.count}}
<ul>
...
</ul>
</searchable-container>
View search-444.ts
@Component({
selector: 'searchable-container',
template: `
<ng-content></ng-content>
`,
exportAs: 'searchableContainer', <========
changeDetection: ChangeDetectionStrategy.OnPush
})
export class SearchableContainerComponent { ... }
View search-421.ts
@Component({...})
export class SearchableContainerComponent {
private _count = 0;
get count() {
return this._count;
}
set count(count: number) {
this._count = count;