Angular Components

In this guide let us explore how to use ng-content to add external content in the Template. We know how to use @Input decorator to pass data to a component. But it is only limited to data and not to the content which includes the HTML elements, CSS, etc, By using the ng-content we can pass the content to a child component. This is also called content projection. The ng-content provides the selector attribute, which allows us to create slots and send different content to each slot.

In this guide let us look at ng-container in Angular. We use this to create a dummy section in the template, without rendering it in the HTML. We also look at some of the use cases of the same.

This guide explains the Template Reference Variable in Angular. We find out what template reference variable is. How to define and use it in Angular.

In this guide let us learn how to make use of @input, @output & EventEmitter in Angular. We use these decorators to pass data from parent to child component & vice versa. @Input defines the property in the component, which the parent component can set. The @output defines the output property (event), which we raise in the child component using the EventEmitter. The parent listens to these events.