Angular Dynamic Component Loader Tutorial with Examples
angular
65
dynamic component
1
Male avatar

loveprogramming viết ngày 08/04/2021

Angular Dynamic Component Loader Tutorial with Examples

https://grokonez.com/frontend/angular/angular-dynamic-component-loader-tutorial-with-examples

[no_toc]In the tutorial, grokonez.com shows how to dynamically load an Angular components by examples. What we introduce:

  • Create Anchor Directive
  • Dynamically Loading and Resolving Components

Related posts:

Overview

An Agnular application may need to load new components at runtime, so component's templates are not always fixed.
The following examples shows how to build an dynamic news banner.

angular-dynamic-loading-component-tutorial-with-examples-overview

New news components are added frequently so it is impractical to use a template with a static component structure.

Angular Anchor Directive

We need define an anchor point to tell Angular where to insert components for adding a new components:
Now we build an NewsDirective to mark valid insertion points in the template:


import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[news-host]'
})
export class NewsDirective {
  constructor(public viewContainerRef: ViewContainerRef) { }
}
  • NewsDirective injects ViewContainerRef to access to the view container of the element that will host the dynamically added component.

news-host is used to apply the directive to the element.

More at: https://grokonez.com/frontend/angular/angular-dynamic-component-loader-tutorial-with-examples

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

loveprogramming

451 bài viết.
79 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
1 0
Tutorial Link: (Link) (Ảnh) Django is a Pythonbased free and opensource web framework that follows the modeltemplateview architectural pattern. A...
loveprogramming viết 6 tháng trước
1 0
Male avatar
1 0
https://loizenai.com/angular11nodejspostgresqlcrudexample/ Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết 5 tháng trước
1 0
Male avatar
1 0
Angular Spring Boot jwt Authentication Example Github https://loizenai.com/angularspringbootjwt/ (Ảnh) Tutorial: ” Angular Spring Boot jwt Authe...
loveprogramming viết 5 tháng trước
1 0
Bài viết liên quan
Male avatar
1 0
https://loizenai.com/angular11nodejspostgresqlcrudexample/ Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết 5 tháng trước
1 0
Male avatar
0 0
https://grokonez.com/springframework/springmvc/angular4springbootcassandracrudexample no_toc]In this tutorial, grokonez shows you Angular Http Cli...
loveprogramming viết 2 tháng trước
0 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
451 bài viết.
79 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!