Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Add dynamic metadata to an Angular CLI Project


    In this lesson we will create a UiService and inside that service we create some application defaults, import the Title and Meta services from @angular/platform-browser and create a function called setMetaData.

    This function will set the metadata of the application based on the config parameter.

    We set some defaults and define a list with tags. We then loop over the tags and invoke the updateTags method from the Meta service.

    Once our service is ready we update the ProductListComponent and ProductDetailComponent to dynamically set the meta data by using the tap operator in the pipe from our Subscription.

    After building and deploying the app we see that the meta data gets updated, and we can now share the app over Social Media and get rich social previews.