Tuesday, 16 January 2018

How to use template in angular component

Angular template is a mix of custom elements and HTML.In this post i will show you how we used the it inline and external template.

There are two ways we can add template in our component.

1. Inline Templates : Inline templates are directly in the component decorator. Template literals with back-ticks allow multi-line strings.


import { Component } from '@angular/core';

@Component({
    selector: 'app-inline-template-example',
    template: `
        <h2>Inline Template</h2>
        <p>
            Here your text
        </p>`
})
export class InlineTemplateComponent {}

2. External Template : External templates define the HTML in a separate file and reference the file in templateUrl.


import { Component } from '@angular/core';

@Component({
    selector: 'app-external-template-example',
    templateUrl: 'external.html'
})
export class ExternalTemplateComponent {}

You can also follow the official style guide of angular html template.

Featured post

How to create dynamic schema in mongodb

Sometime what we need in our application is to create mongodb schema for collection and some of our collection schema are same but names are...

Popular Posts