Templating, Styling and Component Hierarchy in Angular

In Angular, your views are defined within HTML templates.

A template is a form of HTML that tells Angular how to render the component.

Templates are defined within the @Component decorator. You can define inline HTML templates as well as external templates within HTML files.

The choice between inline and separate HTML is a matter of taste, circumstances, and organization policy. In either style, the template data bindings have the same access to the component's properties.

Defining Inline HTML Templates

Define the template property inside the @Component decorator.

 For writing the template with multiple lines enclose it between the back ticks.

To display the component in the view put the selector name of the component(app-header) in the template of root app component i.e.; app.component.html.

A template looks like regular HTML, except that it also contains Angular template syntax(example <app-header>), which alters the HTML based on your app's logic, the state of app and DOM data.

Our view in browser will look like this:

Use Inline template only when your component has only a few lines of code.

To look for the code of inline template visit https://github.com/nagmabano/AngularApplication/blob/master/my-app/src/app/header/header.component.ts

Defining External Templates

This is what our app.component.ts file looks like:

When you use the Angular CLI to generate an Angular project, it uses the templateUrl metadata property to define an external template by default.

You can store your HTMLtemplate files separately and just refer to them in your component by using the templateUrl property.

As a general rule of thumb, you use templateUrl to define a template whenever there's a considerable amount of HTML associated with the given component. Otherwise, if you use inline HTML within the component itself, it will become quite unorganized and hard to navigate.

Defining CSS Styling

Similar to templates you can also define style either inline or in some external file and reference its path. Template styles takes an array of strings.  

You can change styleUrls to styles to define inline CSS and just like template you can use multi-line strings with back-ticks.

The view will be:

Open up the /src/app/app.component.ts file once again and note the property for external style URL's:

Each of these component style files applies to the actual component HTML.

There also exists a global styles file /src/styles.css where we can define the global styles of the whole application.

Templates and View

Views are typically arranged hierarchically, allowing you to modify or show and hide entire UI sections or pages as a unit.

The template immediately associated with a component defines that component's host view.

The component can also define a view hierarchy, which contains embedded views, hosted by other components.

A view hierarchy can include views from components in the same NgModule, but it also can (and often does) include views from components that are defined in different NgModules.

This was all about Component hierarchy, templating and styling in Angular.Feel free to share your experiences while working with component's template and style.