6. How to add internal and external HTML/CSS in a component. Tutorial - 6

 Before we learned to add html files inside the component class. Typically, extra HTML and CSS classes are not used for a few lines of code. In this case, we can use an internal html template and style template.

Internal Template (HTML, CSS)

It is very easy. Inside the class, we will write HTML and CSS code. Just we will follow the syntax. The screenshot and example code are below.

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

@Component({

    selector: 'app-warning-alert',

    template: `

            <p>This is a warning, you are in danger!</p>

    `,

    styles: [ 

     `p {

            padding: 20px;

            background-color: mistyrose;

            border: 1px solid red;

        }

     `   

    ]

})

export class WarningAlertComponent{

}

External Templates (HTML, CSS)

As we learned before, we will create separate three files of type script, html, and css.

Finally, add both selectors in app.component.html file

Output