Sharing Top Content from the Angular-sphere.

Create Advanced Components in Angular – Netanel Basal

  • We are going to learn advanced techniques like how to create an injector and passing TemplateRef or a Component as content.To demonstrate all this, we will create a tooltip.
  • We will use ng-content so that the user can pass a dynamic content.In the end, we will dynamically create this component through the tooltip directive, so let’s stop here and build the directive (we will come back to this component later).
  • Build the Tooltip DirectiveIf you are not familiar with the basics of creating components dynamically in Angular, I highly recommend stopping here and reading my article — Dynamically Creating Components With Angular.What we need to do now is to listen to the mouseenter event and create the tooltip component.We see two new…
  • In real life, you will pass more things, such as the tooltip placement, animation, etc.Note that we can pass the same object as an Input() to the tooltip component, for = configbut we want to avoid dealing with errors like “EXCEPTION: Expression has changed after it was checked.”
  • We are leveraging directives to target the element and query for him with the @ViewChild decorator that provides an API to obtain the native element.We are done with the tooltip component, now let’s see how we can project elements to the ng-content tag.ngContent —The fourth parameter is what Angular will…

In this article, we are going to learn how to create a dynamic component that uses ng-content. We are going to learn advanced techniques like how to create an injector and passing TemplateRef or a…

In this article, we are going to learn how to create a dynamic component that uses ng-content. We are going to learn advanced techniques like how to create an injector and passing TemplateRef or a Component as content.To demonstrate all this, we will create a tooltip. Our final result will be the following:Build the Tooltip ComponentFirst, we need to create the component UI. We will use ng-content so that the user can pass a dynamic content.In the end, we will dynamically create this component through the tooltip directive, so let’s stop here and build the directive (we will come back to this component later).Build the Tooltip DirectiveIf you are not familiar with the basics of creating components dynamically in Angular, I highly recommend stopping here and reading my article — Dynamically Creating Components With Angular.What we need to do now is to listen to the mouseenter event and create the tooltip component.We see two new parameters that we did not discuss in the previous article.Injector —We can use the resolveAndCreate() method, which resolves an array of providers and creates an injector from those providers. The config parameter is the same as @ngModule.providers.In our case, we pass an object with only one property, the host element, so we can calculate the tooltip position. In real life, you will pass more things, such as the tooltip placement, animation, etc.Note that we can pass the same object as an Input() to the tooltip component, for = configbut we want to avoid dealing with errors like…

Create Advanced Components in Angular – Netanel Basal