Angular 4 Component Structure and Properties

Components Properties and Structure

After creating an Angular 4 Component you will notice that it consists of three sections.

Component Import Section

This is where you import any services needed to be used in that component

Component Properties

This part is used for setting a lot of component properties like:

selector: This can be considered as the component name or identifier which can be used to call the component template.

templateUrl: This is where you set the path of the HTML which will be used as an output for that component.

styleUrls: Is the property which is used for setting the CSS path for the above mentioned HTML.

providers: Which has all list of providers needed for this component "dependencies".


You can specify HTML directly to templateURL by changing it to template like below example:

template: `<h1> Hi, It's me the component running directly from there!</h1>`

You can also do the same with the stylesUrl by changing it to styles only like below example:

h1 {

Subscribe to
for video tutorials updates