template and templateUrl

Our poor little car component has no visible body just yet. This is because Angular needs to know what browser-friendly HTML to add when it renders our car component, and we just haven't provided that for Angular yet. The way to provide that is to use the template property (of type string) to hold the HTML that Angular will render for us after it creates the instance of the CarComponent class (any time it sees our custom tags, <car></car>). Let's rectify this by beefing up our preceding @Component annotation:

@Component({
selector: 'car',
template: '<h3>What production car has the fastest acceleration
time from 0 to 60?</h3><p>Tesla </p>'
})
class CarComponent {
}

What would happen if our component required a lot of HTML? Well, this is why we have another property that we can use, templateUrl. The templateUrl property provides us with a way to externalize our component's HTML from our component class and have it in a separate file. Your template property would look something like this:

template: 'car.html'
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.12.36.30