Displaying Dynamic Data

Learn how to display dynamic data using ElementRef in an Angular application.

The directives mainly fall into two categories: structural and attribute. We will now showcase how to create a directive for each category from scratch.

We have all found ourselves in a situation where we want to add copyrighted information to our applications. Ideally, we want to use this information in various parts of our application, on a dashboard, or an about page. The content of the information should also be dynamic. The year or range of years (it depends on how we want to use it) should update dynamically according to the current date. Our first intention is to create a component, but what about making it a directive instead? This way, we could attach the directive to any element we want and not bother with a particular template. So, let’s begin!

We will use the generate command of the Angular CLI to create a copyright directive. We pass the word directive and the name of the directive as parameters:

Note: The command below is for creating a directive on the local machine using the Angular CLI.

Get hands-on with 1200+ tech skills courses.