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.

No comments:

Post a Comment

Download the eBook of react js for beginners

ReactJS basically is an open-source JavaScript library which is used for building user interfaces specifically for single page applications...

Popular