The post is about migrating from ng-include directive (AngularJs) to using ng-template in the newer version of Angular. Taking a practical example of the migration work I did for a community-driven UI framework called Patternfly.

It provides re-usable patterns specific to frames like angular, react etc and also version specific like the angular-patternfly (angularjs) and ng-patternfly (angular 4+) due to architecture differences.

Directive ngInclude: described as “Fetches, compiles and includes an external HTML fragment”

Example for ngInclude directive used in angular-patternfly for a component known as notification-drawer:

pf-notification-drawer is re-usable custom component designed to provide notification drawer. Which is used in various products like Openshift, keycloak & other products etc. It provides a basic scaffolding & renders input provided.

Extracting out a simple use-case for our purpose. We are providing as an input to the component a groups object and heading.html template.

To make it viable for re-use component provide consumers the freedom about how they want to display information or how it should behave.

Notifications Drawer

Component allows input like heading, subheading, title, notification body, mechanism etc.

We can defined groups object:

For displaying simple heading we can take input as nested object with heading as key-value pair that can be evaluated as expression.

heading.html

heading-include is the custom directive build on top of ng-include specific to angular-patternfly.

Behind the scenes it would look like:

heading-include directive

Simplistic view of component pfNotificationDrawer

component:pfNotificationDrawer

ngInclude is been dis-continued in higher versions due:

will not be added as it has security issues which can not be resolved without breaking its semantics.

But we have “ng-template, ng-container and ngTemplateOutlet” in Angular 4 versions. Which are close enough to provide you the re-usable dynamic component functionality.

Now, we will see how we can implement heading-include in angular 4 versions. And adding notification-drawer component to patternfly-ng. Which is designed to support angular 4 versions.

We can start with defining headingInclude as headingTemplate as a type TemplateRef: (Represents an Embedded Template that can be used to instantiate Embedded Views.)

And we can define in the template like:

ngTemplateOutlet: “notificationGroup” object is attached to embedded view and object’s keys will be available for binding by the local template declarations.

For consumers of patternfly-ng:

They need to import the NotificationModule

And add the directives in the template: eg: app.component.html

We can name input template for heading as headingTemplate

and we can add ng-template with attribute #headingTemplate in our app.component.html

You can now use the let-* binding and use object’s key to output the heading for the notification drawer

You can look into the implementation details:https://github.com/patternfly/patternfly-ng for patternfly-ng.

live demo: https://rawgit.com/patternfly/patternfly-ng/master-dist/dist-demo/#/notificationdrawer

Thank you for reading!

#redhatter #opensource #developer #kubernetes #keycloak #golang #openshift #quarkus #spring

#redhatter #opensource #developer #kubernetes #keycloak #golang #openshift #quarkus #spring