#08 View Template of Component | Angular Components & Directives| A Complete Angular Course

Summary

The lecture explains how to create and use a component in Angular, focusing on rendering its view template. It discusses two methods: the 'template' property, which embeds HTML as a string in the TypeScript file, and the 'templateUrl' property, which references an external HTML file. While the 'template' method can handle small amounts of HTML, it becomes cumbersome and error-prone with larger code. The 'templateUrl' method is preferred for separating HTML from TypeScript, making the code more maintainable. The lecture concludes by demonstrating how to implement these techniques.

Takeaways

• 📦 Angular components can be used by referring to their selectors, which are treated like HTML elements.
• 📄 The HTML rendered by a component is known as its view template.
• 📛 The template property in the component is used to define the HTML when there are only a few lines of code.
• 💻 Using template URL allows developers to specify the path to an external HTML file, making the code more manageable.
• 🗂️ It's recommended to use template URL when there are many lines of HTML to avoid cluttering the TypeScript file.
• 🔧 The template property can lead to maintainability issues since it mixes TypeScript and HTML code in one file.
• 🚫 Errors in HTML within the template property are harder to detect since they only appear at runtime, not during compilation.
• 📐 A large amount of HTML code in the template property can make the code messy and difficult to manage.
• 📏 Separating HTML into a template URL promotes better code organization and maintainability, even for small HTML snippets.
• 🖌️ The next step after defining the view template is to style it, which will be covered in the following lecture.

Q & A

What is the view template of a component in Angular?

The view template of a component is the HTML that tells Angular how to render the component. It defines the structure of the component's HTML content.

How do you use a component's selector in Angular?

To use a component's selector, you add the selector like an HTML element in another component's HTML file. Angular then replaces that selector with the component's view template.

What is the role of the 'template' property in a component?

The 'template' property allows you to specify the view template of a component directly as an inline HTML string within the component’s TypeScript file.

Why is the 'template' property not suitable for large HTML content?

Using the 'template' property for large HTML content can make the code messy and harder to maintain because the HTML is written as a string within the TypeScript file.

What is the 'templateUrl' property, and when should you use it?

The 'templateUrl' property specifies the path to an external HTML file that contains the view template for the component. It should be used when the HTML content is large or when you want to separate the HTML from the TypeScript code for better maintainability.

What are the disadvantages of using the 'template' property?

Disadvantages of using the 'template' property include mixing HTML with TypeScript, lack of compile-time error detection for HTML mistakes, and the potential for messy code if the HTML is large.

Why is it beneficial to use 'templateUrl' even for small HTML templates?

Using 'templateUrl' is beneficial even for small templates because it keeps the HTML code separate from the TypeScript code, making it easier to maintain and less prone to errors.

What happens when Angular compiles the component with a selector and a view template?

When Angular compiles the component, it replaces the selector with the HTML content specified in the view template, either defined via the 'template' or 'templateUrl' property.

What issue arises with using 'template' when an HTML tag is not closed properly?

If an HTML tag is not closed properly while using the 'template' property, the error won't be detected at compile-time. Instead, it will only be noticed at runtime, making debugging harder.

What should be done if the HTML view template is styled improperly?

If the view template is styled improperly, CSS or other styling methods can be applied to the component, which will be covered in a subsequent lecture.

Outlines

00:00

🔧 Introduction to View Templates in Angular Components

In this paragraph, the concept of a view template in Angular components is introduced. A view template defines the HTML rendered when a component's selector is used. The header component is used as an example, where the 'app-header' selector renders an H3 HTML element. This basic template is directly written in the component using the 'template' property.

05:01

📝 Using the Template Property for Simple HTML

This section elaborates on the 'template' property for simple HTML, noting that it works well for short snippets like a single HTML tag. However, if more HTML elements are added, such as paragraphs, the code quickly becomes messy. The 'template' property is practical for small templates, but for more extensive HTML, it becomes inefficient.

📂 Introducing Template URL for Complex Templates

The paragraph discusses the alternative to the 'template' property, the 'templateUrl' property. Instead of directly embedding HTML within the component, developers can specify an external HTML file's path. The process of creating and linking the external file (header.component.html) in Angular is explained, making it easier to manage larger templates.

💻 Rendering HTML Using Template URL

Here, the HTML from the external file (header.component.html) is rendered wherever the 'app-header' selector is used. A demonstration is given on how this external HTML is shown in the browser. Although the rendered HTML is unstyled, the use of 'templateUrl' allows for better code organization, especially for larger templates.

🚨 Downsides of Using Template Property

This paragraph highlights the disadvantages of using the 'template' property. Mixing TypeScript and HTML in the same file makes the code less maintainable, and errors in the HTML might not be caught during compilation, only during runtime. Furthermore, large amounts of HTML code can make the TypeScript file cluttered and difficult to maintain.

✅ Preference for Template URL for Better Maintainability

The final paragraph emphasizes the advantages of using 'templateUrl', even for small HTML templates. By keeping HTML and TypeScript separate, the code becomes more maintainable. It reiterates that while 'template' can be used, 'templateUrl' is generally the better choice for maintaining a cleaner, more organized codebase.

Keywords

💡Component

A component in Angular is a building block that controls a part of the user interface. It consists of a class, view template, and style. In the video, the speaker explains how to create and use components by defining their selector and HTML structure, which are then rendered on the web page.

💡Selector

The selector is a property of a component that allows it to be used as a custom HTML element. In the video, the 'app-header' selector is defined for a header component, and it is used in the HTML to render the component. The selector acts like a tag that instructs Angular to replace it with the component's template.

💡View Template

The view template of a component is the HTML structure that defines how the component will be displayed in the browser. The video explains two ways of defining a view template: using the 'template' property with inline HTML or the 'templateUrl' property, which points to an external HTML file. It is a crucial part of separating logic from presentation.

💡Template Property

The template property is used to directly embed HTML inside a component. While convenient for small bits of HTML, the video notes its disadvantages, such as making code less maintainable and difficult to debug when the HTML becomes complex. The video demonstrates how using the template property can make the TypeScript file cluttered with both logic and layout.

💡TemplateURL

TemplateURL is an alternative to the template property, where the view template is stored in a separate HTML file. The video highlights this as a best practice, especially when dealing with larger HTML structures, as it keeps the TypeScript and HTML separate, making the code cleaner and more maintainable.

💡Typescript

TypeScript is the programming language used to define the logic of Angular components. In the video, it is mentioned in the context of how HTML and TypeScript code should be kept separate for better maintainability. Mixing HTML with TypeScript by embedding templates directly can make the code difficult to manage and debug.

💡Maintainability

Maintainability refers to the ease with which code can be updated, debugged, and understood over time. The speaker in the video emphasizes the importance of separating HTML (view templates) from TypeScript logic to improve maintainability, particularly when dealing with large or complex codebases.

💡Runtime Error

A runtime error occurs while the application is running, often due to issues that are not caught during compilation. The video mentions that using the template property can result in runtime errors if there are mistakes in the HTML (e.g., missing closing tags), which may only be detected after the application is live.

💡Compilation Time

Compilation time refers to the phase when the code is converted into an executable format. In the video, the speaker contrasts runtime errors with compilation-time checks, pointing out that using the template property might bypass errors during compilation, leading to issues that are only caught at runtime.

💡HTML File

An HTML file is a separate file that contains the markup for the view template of a component when using the 'templateUrl' property. The video walks through how to create an external HTML file (e.g., 'header.component.html') and link it to the component, showing how this approach organizes the code more effectively than inline templates.

Highlights

Introduction to creating and using components in Angular, utilizing the component's selector like an HTML element.

View template of a component is the HTML that Angular uses to render a component.

Components are created with a selector, which is used in the HTML file to render the component.

Angular renders HTML based on the template property when the component selector is used.

The template property is useful when there's a small amount of HTML, like a few lines.

When there are multiple lines of HTML, using the template property can make the code messy and difficult to maintain.

For larger HTML content, Angular provides the templateUrl property to reference an external HTML file.

The templateUrl property allows developers to keep HTML and TypeScript separate, improving maintainability.

The HTML file specified by templateUrl contains the HTML that gets rendered when the component selector is used.

When using templateUrl, the HTML is written in a separate file, making it easier to manage complex templates.

Mixing HTML and TypeScript in a single file using the template property can make code harder to maintain.

Errors in HTML defined with the template property are only detected at runtime, not during compilation.

Using templateUrl avoids errors related to HTML syntax by separating concerns between HTML and TypeScript.

The template property results in messier code with large amounts of HTML, making it less readable and maintainable.

Using templateUrl is preferred by the speaker even for small HTML content, as it promotes better code organization and maintainability.

Transcripts

in the last lecture we learned how to

create and use a component now when we

create a component in order to use it we

use its selector like an HTML element

and whenever we use the selector of a

component like an HTML element there

some HTML gets rendered

and that HTML is called as the view

template of that component

so basically the view template of a

component is a form of HTML that tells

angular how to render a component

in the last lecture when we created this

header component there we are specifying

a selector called app header

and then we are using this selector in

our app component.html file and we are

using it like an HTML element

so when we are using it like this in

place of this when the angular

application will run in place of this it

has to render some HTML

and we are specifying that HTML using

this template property

so in place of this app header this S3

element will be rendered so if I go to

the web page

there you can see that S3 element has

been rendered

so basically we are specifying The View

template of this header component using

this template property

now we can use this template property

when we have very few lines of HTML for

example here we have only one line of

HTML we have only S3 element here

but if we want to have a lot of HTML

code then specifying it here is a bit

cumbersome for example let's say I also

want to have a paragraph element

and in that paragraph element let me go

ahead and let me write some text then if

I also want to have another paragraph

then again I will add it here inside

this single quotes So in this way this

HTML will become a little bit messy

right we can use this template property

whenever we have very few lines of HTML

for example let's say we have only two

or three lines of HTML in that case

using this template property is okay

because in that case two or three lines

of HTML will not make it messy

but if we have more lines of HTML then

instead of using this template we can

use another property called as template

URL so using this template URL also we

can create a view template for the

component

but when we use this template URL there

we don't assign any HTML

there we need to specify the path of an

HTML file

and the path of this HTML file can be

any HTML file so here we need to now

specify the path of the HTML file which

we want to render whenever this selector

is used in our angular application for

that inside this header folder let's go

ahead and let's create a new file again

the file name should be the component

name in this case the component name is

header Dot component and then the file

extension here we are going to create an

HTML file so the file extension will be

HTML

okay and now in our header component.ts

for this template URL let's specify the

path of this header component.html so it

is in the current directory

and in there we have

header Dot

component dot HTML file

okay

so here we are specifying the path of

the HTML file which should be rendered

wherever we are using this app header

selector

now in this header component.html we can

write some HTML in order to save some

time I have already created some HTML

so let me copy this HTML from here let's

go back to vs code and there let's paste

it

so now wherever we will use this app

header like an HTML element there the

content of this header component.html

will be rendered so if I save the

changes now and if we go to the web page

there you see some HTML has been

rendered here now this HTML is not

styled that's why it looks like this but

we are going to style it in our next

lecture but as you can see

in place of

this app header now the HTML content of

header component.html is being rendered

okay so there are two ways to specify a

view template for your component class

either by using template URL property

like we are doing here

in that case to this template URL

property we need to assign the path of

the HTML file which we want to use as

the view template

or we can also use template property in

that case to that template property we

assign the HTML as string

now when we use template property for

creating the view template there are

some disadvantages there

first of all if we use template property

for creating the view template of our

component in that case we are mixing the

HTML and typescript code which makes the

code less maintainable because in the

same typescript file we have a

typescript class and they only we are

also writing some HTML code so basically

we are mixing the HTML and typescript

code and it makes the code less

maintainable

then since HTML is written as a string

so to the template property we assign a

string and inside that string we write

the HTML code right so if there is some

error there let's say we have missed

some closing tag for an element or

something like that we will not come to

know about it during the compilation

time we will only come to know about it

during runtime so that is another big

disadvantage here

and also if the number of lines of HTML

code is huge it will make the code messy

and non-maintainable

that's why I always prefer to use

template URL property for creating the

view template for my components even

though the HTML code is going to be

maybe one or two lines of code but still

I prefer template URL because in that

way I am separating my HTML code from my

typescript code

all right so in this lecture we learned

what is a view template and how to

create a view template for a component

we learned about two ways we can either

use template property of the add

component decorator or we can use

template URL property for creating a

view template

this is all from this lecture if you

have any questions then feel free to ask

it

in the next lecture let's learn how we

can style The View template of our

component

foreign