#07 What is a Component | Angular Components & Directives| A Complete Angular Course

Summary

This lecture provides an introduction to components in Angular, a key feature of the framework for building client-side applications. It explains that an Angular application is built by combining multiple independent components, starting with a root component (often called the app component). The lecture also covers the parent-child relationship between components and demonstrates how to create a component in Angular. Key steps include creating a TypeScript class, decorating it with the @Component decorator, and declaring it in the module file. A simple example of building a header component is shown.

Takeaways

• 📦 Angular is a component-based JavaScript framework used for building client-side applications.
• 🌳 Every Angular application has at least one root component, conventionally named 'App Component', which can contain child components.
• 🧩 A component is a small, reusable piece of a user interface, and Angular applications are built by combining multiple components.
• 📐 Components can be organized independently, such as a header, sidebar, footer, or content area, and then combined to form the overall application interface.
• 🔗 Components can also have nested child components, forming a parent-child relationship, like a navbar component inside a header component.
• 🏗️ To create a component in Angular, follow three steps: create a TypeScript class, decorate it with the @Component decorator, and declare it in the main module file.
• 📑 The @Component decorator is used to define a component, including its selector and template, which specify how the component will render in the DOM.
• 🗂️ Angular components must be registered in the 'declarations' array of the Angular module to be recognized and used by the framework.
• 🔀 Components can be inserted into the root component or other components using their selector (e.g., 'app-header' for a header component).
• 🛠️ The template for a component can be directly defined using the 'template' property or by specifying an external HTML file using 'templateUrl'.

Q & A

What is a component in Angular?

A component in Angular is a small, reusable piece of a user interface. Components are the building blocks of Angular applications, and each Angular app has at least one component called the root component.

What is the purpose of the root component in an Angular application?

The root component, often referred to as the 'app component', represents the entire Angular application. It is the parent component that contains all other components and forms the structure of the app.

How can different parts of the user interface be structured in Angular?

In Angular, the user interface is split into separate components. For example, a web application could have components for the header, navbar, sidebar, main content, and footer. Each of these can be built independently and combined to create the full user interface.

What is the convention for naming a root component in Angular?

By convention, the root component of an Angular application is named 'app component', although it can be named anything.

How do components form a parent-child relationship in Angular?

In Angular, components can have a parent-child relationship where the root component (e.g., 'app component') contains child components like the header, navbar, and footer. Similarly, each child component can have its own child components.

What are the three main steps to creating and using a component in Angular?

The three steps to create and use a component in Angular are: 1) Create a TypeScript class and export it, 2) Decorate the class with the '@Component' decorator, and 3) Declare the component in the main module file.

What is the purpose of the '@Component' decorator in Angular?

The '@Component' decorator in Angular is used to define a class as a component. It provides metadata, such as the selector and template, that Angular uses to understand how the component should be rendered.

What is a selector in Angular, and how is it used?

A selector in Angular is a property defined in the '@Component' decorator. It represents the custom HTML tag that will be used to display the component in the template. For example, the selector 'app-header' can be used in HTML as '<app-header></app-header>'.

How can the template of a component be defined?

The template of a component in Angular can be defined using either the 'template' property (inline HTML within the component) or the 'templateUrl' property (linking to an external HTML file).

How does Angular become aware of a new component?

Angular becomes aware of a new component when it is declared in the 'declarations' array of the module (typically 'AppModule'). The component also needs to be imported in the module file.

Outlines

00:00

📘 Introduction to Angular Components

In this paragraph, the concept of components in Angular is introduced. Components are described as a key feature of Angular, a JavaScript framework used to build client-side applications. The paragraph explains that Angular applications are made up of multiple independent components, which are then combined to form a complex user interface. Every Angular application has at least one root component, typically called the 'app component', which houses other child components. The paragraph emphasizes that Angular applications are essentially structured as a tree of components.

05:02

🔍 Breaking Down UI into Components

This paragraph discusses how Angular divides a user interface (UI) into independent components. A simple web application is used as an example, where different parts like the header, navbar, sidebar, footer, and main content area can be built as separate components. These components can also have their own sub-components, which are inserted into their parent components. This modular approach allows developers to work on each UI section independently before combining them into a full application. The app component is highlighted as the root component that ties everything together.

10:02

🛠️ Steps to Create an Angular Component

The paragraph outlines the process of creating a new component in Angular. It begins by explaining that a component is essentially a TypeScript class. The steps include creating a class, decorating it with the `@Component` decorator, and specifying key properties like the selector and template. The example walks through creating a 'header' component by first defining its folder structure inside the app folder. It also explains how to name the component and organize the TypeScript file properly, setting up the component to be reused in the application.

📂 Setting Up and Exporting Component Class

Here, the detailed process of creating a TypeScript class for a component is explained. After creating a file for the 'header' component, the class is defined with the 'class' keyword and exported for use in other files. To convert this TypeScript class into a component, the `@Component` decorator is added. This decorator requires importing from Angular's core library and includes important metadata such as the selector and template. The paragraph covers the basic syntax needed to set up the component class and includes an HTML template as part of the view.

🖥️ Declaring Components in the Angular Module

This paragraph focuses on how to make Angular aware of newly created components by declaring them in the module file. The example uses the 'header' component, which needs to be imported into the app module. Once imported, the component must be added to the 'declarations' array so that Angular knows about it and can use it within the application. The process of registering a component within a module is essential for making it functional in an Angular project.

🔗 Using Component Selector in HTML

The paragraph explains how to use a component in the application by referencing its selector in the HTML. For the 'header' component, the selector 'app-header' is used to embed it into the root component's HTML. When this selector is added, the content from the header component’s template, such as an `h3` element displaying the app name ('Ecart'), will appear on the web page. This demonstrates how components interact with the DOM using their defined selectors.

✔️ Component Creation Recap and Error Handling

This section recaps the entire process of creating and using components in Angular. It reiterates the steps: defining a TypeScript class, using the `@Component` decorator, specifying a selector and view template, and registering the component in the module. The paragraph also highlights the importance of having a view template, as missing it can cause errors. Finally, it emphasizes the need to declare components in the module file to ensure they are recognized and usable in the Angular application.

Keywords

💡Component

A component is a key building block in Angular applications. It is a small, reusable piece of the user interface, each with its own functionality and structure. In the video, components are described as the fundamental units used to build complex client-side applications by splitting the UI into separate, independent parts, like the header, footer, and sidebar.

💡Root Component

The root component is the main component in an Angular application, from which all other components are structured. Typically called the 'app component,' this serves as the parent for all other child components, forming a component tree. The video explains how the root component represents the entire Angular application.

💡Child Component

A child component is nested within another component, known as its parent. Child components inherit functionality and interact with their parent components. For instance, the video mentions that the header, sidebar, and footer are child components of the root app component, showing how components are organized hierarchically.

💡Selector

A selector is an identifier for a component in Angular, used to place the component within the HTML structure. It is a property within the component decorator. In the video, the selector for the header component is 'app-header,' which is later used in the app component's HTML to insert the header component.

💡Decorator

A decorator is a special syntax in TypeScript used to attach metadata to classes, methods, and properties. In Angular, the '@Component' decorator is used to turn a simple TypeScript class into an Angular component. The video explains how this decorator is applied to the TypeScript class of a component to enable its functionality within Angular.

💡Template

A template in Angular defines the view layer of a component, representing the HTML structure that the component will render in the browser. In the video, the header component uses a simple template containing an h3 element. This template determines how the content of the header component appears on the webpage.

💡Module

A module in Angular is a container for different parts of an application, including components, services, and other modules. The video mentions the 'app module' as the main module where components are declared and registered, ensuring Angular knows about them and how they are structured in the application.

💡Declaration

Declarations in Angular refer to the process of registering components, directives, and pipes within a module. Without proper declaration, Angular will not recognize a component. The video explains how to declare the header component within the app module, making it available for use in the root component.

💡Client-Side Application

A client-side application is software that runs entirely within the user's browser, handling interactions and rendering without the need to reload the entire page. The video highlights that Angular is a framework specifically designed for building client-side applications, which are composed of numerous components working together.

💡Parent-Child Relationship

In Angular, the parent-child relationship defines how components are structured and interact with one another. A parent component can pass data to its child components, while child components can send events back to the parent. The video illustrates this with examples, such as how the app component is the parent of the header, sidebar, and footer components.

Highlights

Angular is a component-based JavaScript framework for building client-side applications.

A component is essentially a small piece of the user interface.

Every Angular application has a root component, commonly referred to as the app component.

Angular applications are structured as a tree of components, which come together to form the user interface.

Developers can split sections of the web application into independent components (e.g., header, footer, sidebar) to work on them separately.

Each component can have child components, like a navbar inside a header component, or individual menu items within a navbar component.

Parent-child relationships exist between components, where the parent can include and control multiple child components.

To create a component, you first need to create a TypeScript class and export it.

You must use the @Component decorator to transform a TypeScript class into a component.

In Angular, components must have a view template, which can be defined inline using the template property or through an external file with templateUrl.

The selector property in a component allows it to be used as a custom HTML tag.

Once a component is created, it must be declared in the module's declarations array for Angular to recognize it.

The root component file (app.component.html) is where the other components, like header or footer, are inserted using their selectors.

After importing and declaring a component, you can use its selector as an HTML element in the template to render its content.

Without a view template, Angular throws an error indicating that the component is missing essential information.

Transcripts

hello and welcome to another lecture of

this complete angular course in this

lecture we are going to learn about

components in angular a component is the

key feature of an angular application

so angular is a component based

JavaScript framework for building

client-side applications we have learned

that we use angular for creating

client-side applications

now we create these client-side

applications with the help of components

a component is basically a small piece

of user interface

when building an angular application

first we build a bunch of components

independent of each other and then we

combine these components together to

build a complex user interface

every angular application has at least

one component which is referred to as

root component and mostly we call this

root component as app component and this

is just a convention you can call your

root component anything but by

convention we always call the root

component of our angular application as

app component this root component

represents the entire application and it

contains other child components so every

angular application is essentially a

tree of components and combining all

these components together makes a

client-side application with angular

let's try to understand what is a

component visually

so here let's say we have a simple web

application and in this web application

we have a header we have the main

content area we have a sidebar and we

have a footer

so while creating this application using

angular we can split each of these UI

paths into separate components and we

can work on them independently for

example we can split this header into a

separate component and we can work on

that component independently

in this header component we have a nav

bar so we can also split that navbar

into a separate component and once that

component is ready we can insert it in

the header component

in the same way if we want each menu

item here in this neighbor we can create

them as a separate component and then we

can insert them into the navbar

component

then we can also have a separate

component for the sidebar and in this

sidebar we are using some sections so we

can have a separate component for each

of these sections and then we can insert

these section components into the

sidebar component

then we can have a separate component

for this main content area and in that

main content area we can have separate

components for these contents and then

we can also have a separate component

for footer

and once we have all these components

built we can combine all these

components together to create a user

interface

so we can say that at the top we will

have our app component app component is

the root component of our angular

application and in this app component we

insert all our other components for

example in this app component we can

insert a component for header a

component for never a component for main

content area a component for footer and

a component for sidebar

then this sidebar component can have its

own child components like popular

courses 1 popular courses 2 popular

courses 3 Etc in the same way the main

content area can have its own child

components like it can have a cover

image it can have the main content it

can have the Subscribe button so we can

insert as many components as we want

inside another component

now in this example this app component

is the root component and it is the

parent of all the components in this

case this app component is the parent

for header component Neva component main

component footer component and sidebar

component

in the same way this main component is

the parent component for this cover

component content component and this

subscribe component so here we have a

parent child relationship between the

components

all right so I hope with these examples

now you understand what is a component

now let's go ahead and let's create a

component

now in order to create and use a

component we need to follow three steps

first we need to create a typescript

class and we need to export it second we

need to decorate that typescript class

with ADD component decorator and finally

in order to use that class as a

component we need to declare it in the

main module file so let's go ahead and

let's do that

here in vs code let's first go to this

Source folder in that Source folder we

have this app folder and this app folder

is our main application folder

in this app folder we have a component

called app component

and this is going to be our root

component okay now whatever application

code we will write we will write it

inside this app folder so for example

let's say I want to create a component

called header now we are going to insert

that header component inside our root

component which in this case is app

component

and since we are going to insert it in

our app component the convention is the

child component should always go inside

the parent component folder in this case

the parent component folder is this app

component folder and we are going to

insert the header component inside the

app component so the header component is

going to be the child component of app

component so we are going to create a

new folder inside this app folder

and here we are going to name this

folder with the name of the component so

I am going to create a header component

so here I will call this folder as

header

now inside this header folder we are

going to create our header component

and keep in mind that a component is

nothing but a typescript class

so inside this header folder we are

going to create a typescript file let me

go ahead and let me create that file and

this file is going to contain the header

component class

so here the convention to name your

component is first you need to specify

the name here we want to call our

component as header then you need to use

Dot and you need to call it component

and since it is going to be a typescript

file we need to specify the extension as

dot TS

okay so first the component name dot

component and then the extension

so this file is going to contain our

component class

okay so file has been created now inside

this file in order to create a component

first we need to create an exporter

class

in order to create a class in typescript

we use class keyword and then we specify

the name for the class and the

convention here is the name for the

class should be the name of the

component in this case we want to call

the component as header and it should be

prefixed with component

okay

so this is how we create a typescript

class now we also want to use this

typescript class in other files so we

also need to export it from here so that

we can import it in other files

now this class here it is a simple

typescript class it is not a component

class

in order to make this class a component

class we need to decorate it with at

component decorator

okay and in order to use this component

decorator we need to import it from

angular slash core Library

so here first we are importing this

component from angular slash code

library and then we are using it

now to this decorator we need to pass

the metadata object

and in there we need to specify few

properties so as you can see here we are

already seeing a red squiggly that means

we have some error here and it says

component is missing a template so as we

have learned earlier every component

must have a view template

okay so here we are going to specify two

properties the first property is going

to be selector

and we are going to call this selector

as app hyphen the component name which

is header so it is a convention that you

call you selector app hyphen and then

the component name

once we have the selector we also need

to specify the view template now in

order to specify the view template there

are two ways we can either use template

property or we can use template URL

property for now we are simply going to

use template property

okay and to this template property we

can assign some string and inside that

string we can write some HTML so here

I'm going to write an HTML let's say I'm

going to write an S3 element there

and in that S3 element I'm going to

specify the name of this application

which is going to be ecart

and that should be it so here I want to

create a very simple component now the

component has been created okay but

angular is not aware about this

component yet

so what we need to do is we need to tell

angular that we have a component called

header component and whenever the

angular application loads it should know

about this component

do that we need to go to our main module

class

and in here we need to declare our

custom component

so here we need to declare the header

component which we have just created

in order to do that first we need to

import this header component

so for that we can use this import

keyword and then what do we want to

import we want to import header

component

okay and we want to import it from

this path so in the app component we

have this header folder and in that

header folder we have this header

component okay here dot TS is not

required

and once we have imported it now we need

to declare it inside this declarations

array so let me go ahead and let me copy

this component and we can declare it

inside this declaration sorry

and now we should be able to use this

header component

so let's go to our app component.html

which is the root component of our

application and in there I am simply

going to use our header component now in

order to use header component we need to

use it selector so what is the selector

we have specified for this header

component it is app header so let's copy

this selector

let's go to app component.html and there

let's use that selector as an HTML

element

and that should be it if I save the

changes and if I go back to the browser

you can see ecut here so this content it

is coming

from our header component

from this view template

so here we have used this template

property in order to specify the view

template for this header component class

so this S3 element is being rendered in

the browser

here okay so this is how we create and

use a component in angular

first we create a typescript class and

in order to make that typescript class a

component class we decorate it with at

component decorator

and then there we need to specify a

selector and a view template if we don't

specify the view template you will see

that we have an error

as you can see we have an error

so let's get it back

so we need to specify the selector and

the view template and then in order to

use this component class in our

application first we need to declare it

so that the angular will know about this

component and to declare it we need to

go to our module class so in this case

we have only one module class this app

module class and there it is decorated

with this NG model decorator and in

there we have this declarations array so

we need to register we need to declare

our component inside this declarations

array

all right so this is all from this

lecture if you have any questions then

feel free to ask it thank you for

listening and have a great day