Skip to content

Instantly share code, notes, and snippets.

@felixlindemann
Created November 21, 2021 12:03
Show Gist options
  • Save felixlindemann/3cee6ca4af9212dc18608ba7bbb1b5cb to your computer and use it in GitHub Desktop.
Save felixlindemann/3cee6ca4af9212dc18608ba7bbb1b5cb to your computer and use it in GitHub Desktop.
Blog in Angular - the dynamic Component
@Component({
selector: 'app-blog-post',
templateUrl: './blog-post.component.html', // <ng-template appBlog></ng-template>
styleUrls: ['./blog-post.component.scss']
})
export class BlogPostComponent implements OnInit, OnDestroy, AfterViewInit {
// [...] ommitted for abbreviation
constructor(
private service: PostsService,
private seo: SEOService,
private route: ActivatedRoute) {
}
@ViewChild(BlogDirective, { static: false })
set appBlog(value: BlogDirective) {
if (!!value) {
this._appBlog = value;
this._viewContainerRef = this._appBlog.viewContainerRef;
this.loadComponent();
}
}
loadComponent() {
if (this.post !== null && this.post.id.length > 0 && this._viewContainerRef !== null && this._viewContainerRef !== undefined) {
setTimeout(() => {
if (this.isLoaded === false) {
this._viewContainerRef.clear();
this._viewContainerRef.createComponent(this.post.Component);
this.oldId = this.post.id;
}
});
this.seo.updateMostCommon(this.post.title, this.post.introduction, this.post.category, this.post.tags, this.post.author);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment