#12 Create Component using Angular CLI | Angular Components & Directives | A Complete Angular Course

Summary

This lecture explains how to create Angular components manually and with Angular CLI. It starts by detailing the process of defining a component class, adding the view template and styles, and registering the component manually in the app module. The instructor then introduces the Angular CLI command 'ng generate component' to automate these tasks, showing how it speeds up development. The lecture also covers fixing a compilation error due to a missing Bootstrap reference and demonstrates the refactoring of HTML into child components, styling them, and verifying results in the browser.

Takeaways

• 🔧 Manually creating components in Angular involves defining a class, decorating it with @Component, and registering it in the app.module.ts.
• ⚙️ Using the Angular CLI simplifies component creation by automating the generation of the component class, view template, and registration in the main module.
• 🛠️ The command 'ng generate component [component name]' automatically creates a new component with the required files and registers it in the app module.
• 🗂️ Removing unnecessary dependencies (like Bootstrap) requires cleaning up references in the angular.json file to prevent compilation errors.
• 🖥️ The CSS and HTML for a component are scoped to that component, meaning styles in one component won't affect another unless applied globally.
• 🚀 Using Angular CLI for component generation speeds up the development process by automating tasks such as registering components.
• 📁 Child components can be created inside parent component folders and referenced within the parent’s HTML for a cleaner structure.
• 🔄 Refactoring large HTML sections into separate components makes code more modular and easier to manage, as shown with the top menu and main menu components.
• 🎨 Styles for components can be moved from parent components to their respective child component CSS files for better encapsulation.
• 📜 The Angular CLI ensures that any new components are automatically declared in the main module, reducing manual intervention.

Q & A

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

The @Component decorator is used to define an Angular component. It decorates a class by providing metadata about the component, such as the selector, template, and styles.

How do you manually create and register a component in Angular?

To manually create a component, you define a class decorated with the @Component decorator. Then, register the component by adding it to the 'declarations' array in the appmodule.ts file.

What is the Angular CLI command to generate a component?

The Angular CLI command to generate a component is 'ng generate component <component-name>'. This can also be shortened to 'ng g c <component-name>'.

What tasks are automated by using the Angular CLI to generate a component?

When using Angular CLI, it automates the creation of the component class, view template, stylesheet, and also registers the component in the app module. This eliminates the need for manual registration.

How do you fix the error caused by uninstalling Bootstrap in an Angular project?

The error occurs because the Angular.json file is still referring to the Bootstrap CSS file. To fix this, you need to remove the reference to 'bootstrap.min.css' from the 'styles' array in the Angular.json file.

What happens if you try to use a component selector without importing its CSS styles?

If you use a component selector without importing its specific CSS styles, the HTML will be rendered but without any styles being applied. This is because Angular's CSS is scoped to each component, and styles are not applied globally unless specified.

How can global styles be applied to all anchor elements in an Angular project?

To apply global styles to all anchor elements, you should add the necessary styles for the 'a' tag inside the 'styles.css' file. This will apply the styles globally across all components.

Why would you refactor the HTML inside a component?

Refactoring the HTML in a component helps to organize the code better. For example, separating different sections like 'top menu' and 'main menu' into their own components improves maintainability and clarity.

How do you handle the CSS styles for child components in Angular?

In Angular, CSS styles are scoped to individual components. If a child component requires specific styles, you need to move those styles from the parent component's CSS to the child component's CSS file.

Why don't you need to manually declare a component when using Angular CLI to create it?

When using Angular CLI, it automatically declares the component in the 'declarations' array of the app module. This is one of the conveniences of using CLI, as it speeds up development by handling this task for you.

Outlines

00:00

🛠️ Introduction to Angular Components

The paragraph provides a review of creating Angular components manually, explaining how to define view templates, style the view, and register the component within the app module using the `@Component` decorator. It then introduces Angular CLI as a more efficient alternative for generating components. Using the `ng generate component` command, Angular CLI automates the creation of the component class, view template, style sheet, and registration in the app module, eliminating the need for manual setup.

05:00

🚀 Fixing Bootstrap Errors and Using Angular CLI

The speaker addresses an error in the project caused by an uninstalled Bootstrap reference in the `angular.json` file, explaining how to remove the unused path. After correcting this, the `ng serve` command is run to verify that the project compiles successfully. Following this, a new component named 'top header' is created using the Angular CLI (`ng generate component top-header`). The resulting component files are then reviewed and the `app-top-header` selector is adjusted to `top-header`. HTML and CSS styles are added to the component, demonstrating how Angular CLI automatically registers components in the app module.

10:02

📋 Creating and Styling the Top Menu Component

The focus shifts to creating a 'top menu' component, using the `ng generate component top-menu` command. After the component is generated, the default test file is deleted. HTML and CSS content for the top menu is then extracted from the header component and added to the top menu's template and stylesheet files. The speaker highlights that styles defined in one component’s CSS file are not applied to child components, demonstrating this with a missing CSS issue. The styles are then successfully transferred and applied in the appropriate component files, resulting in a correctly rendered top menu.

15:03

⚙️ Creating the Main Menu Component and Removing the Search Bar

The paragraph explains how to create a 'main menu' component in a similar manner as the top menu, using the Angular CLI. HTML content for the main menu is extracted from the header component and added to the main menu’s template. The associated CSS is also moved to the new component’s CSS file. The speaker points out a slight alignment issue and resolves it by making additional CSS adjustments. Additionally, an unnecessary search bar is removed from the header component and its styles are cleaned up. The speaker concludes by noting that the newly created components are automatically registered in the app module by Angular CLI.

Keywords

💡Component

A component in Angular is a self-contained unit that controls a part of the user interface. It consists of a TypeScript class, an HTML view template, and a CSS stylesheet. In the video, components such as the 'header component' and 'top header component' are discussed as essential building blocks for organizing and structuring the app's UI.

💡Angular CLI

Angular CLI (Command Line Interface) is a tool that helps developers automate the creation of Angular components, services, and modules. The video demonstrates how Angular CLI simplifies the development process by automating tasks like generating component files and registering them in the app module using commands like 'ng generate component'.

💡Decorator

A decorator in Angular is a special syntax used to add metadata to a class, making it an Angular component. In the video, the '@Component' decorator is used to define components like 'header component' and 'top header component'. This metadata includes information such as the template and styles associated with the component.

💡Template

A template in Angular refers to the HTML structure that defines the view for a component. The video explains how each component, such as 'top header component', has its own HTML template that defines what will be rendered on the web page. The template connects the view with the component’s logic and styling.

💡AppModule

AppModule is the root module in an Angular application, where all components, services, and other modules are declared. The video highlights how manually created components must be registered in the 'AppModule' file, but Angular CLI automates this process when creating components.

💡ng generate

'ng generate' is an Angular CLI command that automatically generates files for components, services, or other features of an Angular app. In the video, this command is used to create components like 'top header' and 'main menu', simplifying the development workflow by generating the necessary files and configurations.

💡CSS Styles

CSS styles are used to define the visual appearance of an Angular component. In the video, CSS is applied to components such as 'top header' and 'top menu' to enhance their presentation. The script also covers how styles are component-scoped, meaning each component’s styles are encapsulated and don’t affect other components.

💡Child Component

A child component is a component that is nested inside a parent component. In the video, the 'top menu' and 'main menu' components are described as child components of the 'header component', demonstrating how Angular’s component-based architecture allows complex UIs to be broken down into smaller, reusable pieces.

💡Selector

A selector in Angular is a custom HTML tag that represents a component in the application’s DOM. In the video, the selectors 'app-header' and 'app-top-header' are used to embed the header and top header components into other templates. The selector connects the component logic to its place in the overall app structure.

💡Module Declarations

Module declarations in Angular refer to the list of components, directives, and pipes that are part of an Angular module. In the video, the 'declarations' array in 'app.module.ts' is where components like 'header' and 'top header' are declared. The video emphasizes that when using Angular CLI, the process of adding components to this array is automated.

Highlights

Learned how to create and style components in Angular manually and using Angular CLI.

Explained the process of creating a component class decorated with @Component and how to register it in app.module.ts.

Introduced the Angular CLI command 'ng generate component' to automate component creation.

Demonstrated how Angular CLI generates a component class, view template, and stylesheet automatically.

Resolved an Angular compilation error caused by an incorrect reference to the Bootstrap file in angular.json.

Showed how to use Angular CLI to create a top-header component and adjust its selector and template.

Explained the automatic registration of a component in the declarations array of app.module.ts using Angular CLI.

Described the process of refactoring HTML by separating top navbar and main navbar into separate components.

Discussed how to organize child components by creating top menu and main menu components inside the header component.

Showed how to move the top menu's HTML and CSS from the header component to its respective component files.

Highlighted that Angular component CSS styles are scoped to the component and do not apply to child components.

Explained the need to copy relevant CSS styles to a component's specific CSS file for them to apply.

Demonstrated global CSS by moving anchor styles from the component-specific CSS file to the global style.css.

Explained the process of cleaning up unused HTML and CSS for better maintainability.

Reiterated the benefits of using Angular CLI for speeding up development by automating component registration and setup.

Transcripts

in the last few lectures we learned

about component in great detail we

learned how to create a component how to

define the view template for that

component and how to style that view

template

so if I go to the source folder inside

this Source folder we have this app

folder and in there we created this

header component so if I go to this

header component.ts file there we have

this header component class decorated

with at component decorator

now we created this header component

manually by defining this header

component class decorating it with at

component decorator and then registering

this header component in the

appmodule.ts file basically inside this

declarations array so here you can see

we are registering we are declaring this

header component which we created

now we can also create a component using

angular CLI

and for that we simply need to run this

command

so the command is NG generate component

and the component name

now what this command will do is it will

first create a component class decorated

with at component decorator

it will also generate the view template

and style sheet for that component

and it will also register that component

class in the main module so we don't

have to do anything manually here in

order to create a component

everything will be taken care by angular

CLI

so let's see how we can create a

component using this angular CLI command

but before that let's first go ahead and

let's fix the error which we introduced

in our last lecture

so in the last lecture from this angular

application we uninstalled bootstrap

right and when we uninstalled bootstrap

we are still referring to that bootstrap

file in our angular.json file basically

here inside this Styles array so you see

we are still referring to that

bootstrap.min.css file inside this

angular.json

and because of this what is happening is

when I am trying to compile this project

I am getting this error so the error

says can't resolve this file path

in this project and because of that the

compilation is failing

so in order to fix this problem all we

have to do is we have to go back to vs

code and from the angular.json file from

within this Styles array we need to

remove that path we need to remove that

reference

and with this if I save the changes now

our angular application should compile

properly without any errors so if I go

back to command prompt

here let's first go ahead and let's stop

this process by pressing Ctrl C

let me clear the command prompt here and

then let's again go ahead and let's run

this NG serve command

and now we should not have any

compilation errors

so now you can see the project is

compiling successfully and we don't have

any compilation errors

all right now let's go back and let's go

ahead and let's create a new component

using angular CLI for that

let's open this terminal

and what we want is we want to create a

new component called top header

so let me first clear the terminal here

and in order to create this top header

component we are going to use angular

CLI so here we need to type the command

NG generate

insert we can also write it as ngg

and we want to generate a component so

we need to specify that

or in short we can also write it as C

for component and then the name for the

component so I'm going to call this

component top header

let's press enter and what this command

will do is it will create a folder with

the name top header and inside that it

will generate all the component related

files

so now if I go to Source folder

in the source folder if I go to app

folder there you will see inside this

app folder we have another folder called

top header and inside this top header

folder we will have all the files

related to the top header component

so here we have the top header

component.ts file there we have this top

header component class decorated with

ADD component decorator

in there we have the selector called as

app top header but instead of calling it

app top header I will simply call it top

header

okay and wherever we will use this top

header selector there this HTML file

will be rendered so this is the view

template for this top header component

so let's go to this top header

component.html file in there currently

we simply have one paragraph element so

wherever we will use this top header

selector there that paragraph will be

rendered okay

and we also have top header

component.css file inside this we can

write some CSS for our top header

component

then we also have this top header

component dot spec.ts file basically it

is a file inside which we can write some

unit tests for our component but for now

I don't want to worry about writing unit

tests so what I will do is I will simply

go ahead and I will delete this file

okay now let's go ahead and let's use

this top header component in our app

component so I'll copy this selector

let's go to app component.html and there

before this app header

let's use this top header

okay so for this top header

this paragraph will be rendered let's

see that in web page so let's go back to

the web page

and there you will notice that paragraph

has been rendered

but instead of rendering a paragraph

here I want to display a top header now

in order to save some time

I have already written some HTML for the

top header so I'll copy that HTML from

here

let's go back to vs code and here

instead of that paragraph let's paste

that HTML

here I don't need this ID for now so

I'll remove it

so this is a very simple HTML where we

have a div with this class ecard top

header in there we have a paragraph with

this value and then we are also

displaying a font awesome icon

so let me save these changes here let's

go back to the web page

and there you will see that paragraph

okay

now in order to style this top header

again I have written some CSS so let's

grab that CSS from here

let's go back to vs code

and let's go to

top header component.css and there let's

paste that CSS let's save the changes

again

let's go back to the web page

and this is how our top header looks

like

okay

now you might ask okay using the angular

CLI we created the component but when we

created the component manually that time

we also had to register it in the main

module in the app module class

right but we have not done that for this

top header component well that's because

after creating this top header folder

and generating the files for the top

header component angular CLI will also

declare that component in the main

module so if I go to this app module.ts

file there you will see that this top

header component that has already been

declared inside this declarations array

so it has been imported from this file

path and then it has been added to this

declarations array we don't have to do

it manually

so all these manual tasks are taken away

from us when we create a component using

angular CLI

and this helps us in speeding up the

development process and that's the

advantage of using angular CLI for

creating the angular component

all right

let me go ahead and let me close these

files now

okay

now what I also want is if I go to this

header component and if I go to this

header component HTML file you will see

that here in this header component we

have lot of HTML so what I want is I

want to refactor this HTML

if I go to the web page

there you will see we have two navbars

so the first one let's say is top navba

and this one is the main navba so what I

want is I want to create separate

components for this top nav bar or maybe

we can call it top menu and also the

main menu

so let's go ahead and let's create

components for these two menus

now let me go ahead and let me clear the

terminal first

so the top menu and the main menu these

two components are going to be the child

component of this header component

because we are going to use those

components inside this header component

okay so since these components are going

to be the child component of this header

component what we need to do is

we need to move inside this header

component first for that we can type the

CD command So currently we are in the

project directory basically this

directory from here we need to go to

Source folder from The Source folder we

need to go to app folder and from the

app folder we need to go to header

folder so we can say

Source slash app slash header

if I press enter

now we are in the header folder and

inside that header folder we want to

create a new component for that again we

can use NG generate command in short you

can also write it as ngg and we want to

generate a component

and I'm going to call this component

top menu

let's press enter

and now this command should generate the

top menu component with all the required

files

so it has been generated and in the

header folder you will see a new folder

called top menu has been created and in

there we have all the component related

files again let me go ahead and let me

delete this spec.ts file we don't need

it for now

okay so if I go to topmanycomponent.ts

file there we have this top menu

component class decorated with at

component decorator and there the

selector is app top menu again I'll

simply call it as

top menu

for that the view template is this HTML

file and style sheet is this HTML file

so inside this I want to write the HTML

for top menu basically the HTML for

this menu

so I'll copy it from header

component.html

so this is the top menu let me cut it

from here

and I will specify a comment here

top menu so that letter I will add that

top menu component selector after this

comment

so let me go to

topmanycomponent.html instead of this

paragraph

let me paste that HTML here

and then we also want to design this

HTML

and we have the CSS for this HTML file

inside header component.css file

so here if I scroll up we have the CSS

for that class ecard top bar now if I

don't copy this CSS class from here and

paste it inside

topmanycomponent.css this style will not

get applied on that div so in the top

menu component.html we have this div

with this ecard topper class name

okay but in the CSS file we don't have

any style for that class but we have

some Styles defined for that CSS class

in header component dot CSS file

but we have learned that this CSS it

will be only applied to the view

template of header component it will not

get applied to the view template of any

other component and just to prove that

let me go ahead and let me copy the top

menu selector from here

and

let's use it in the header

component.html so here let's go ahead

and let's use it

okay let's save the changes

let's go back to the web page

and there you will see that the top menu

is being displayed but there is no CSS

style applied on that

and this is what we learned earlier

so even though there is a CSS style

defined for that CSS class in the header

component.css file it will not get

applied on that because that is a

completely different component this top

menu component it is a different

component than header component even

though it is a child component of this

header component this CSS style is not

getting applied there

so what I will do is I will cut it from

here

let's go to top menu component.css file

and there let's paste that CSS

save the changes let's go back to the

web page

and now you will see that some Styles

have been applied here so basically now

it is displayed in the right hand side

but again the underlines for these links

are still there and the color of these

links are still blue

that's because we also need to take

these Styles which we have defined for

the anchor element basically this style

and we need to put it inside the top

menu component.css file but instead of

specifying this style here

so I can specify it here and I can save

it and if you go to the web page again

there those styles are there but then

for these anchor elements those styles

are gone

so what we want is we want to apply

these tiles for all the anchor elements

we want to specify these Styles globally

for all the anchor elements so what I

will do is I will take this style for

this anchor element from here

and I will add that CSS style in the

style.css file so that it will be

applied globally

so now on all the anchor elements in

this angular project these Styles will

be applied so if I save the changes now

and if we go back

now those styles are applied on these

menu items also these links also and

these links also

okay so in this way we separated the top

menu component from the header component

so if I go back

let me close this topmany component.css

file let's also close this style.css

file

and let me close this top many

component.html file we are not going to

do anything in this file right now

and if I go to this header

component.html file now it is a bit

leaner so now to display the top menu we

only have one line of HTML

in the same way I also want to separate

this main menu into a separate component

so again let me go ahead and let me

clear the terminal here and again we

want to create this new component inside

the header component only because this

main menu component it is also going to

be a child of header component

so again I will say NG generate

component and I'm going to call this

component main menu

let's press enter

so again it should generate all the

required files for the main menu

component all right it has been

generated a folder has been created here

called main menu

from here let me first go ahead and let

me delete this spec.ts file

if I go to main menu component.ts there

you will see we have this main menu

component class

decorated with a component decorator it

has this selector template URL and style

urls so now let's go to header

component.html and let's cut this HTML

from here

and here we want to display main menu

okay

now let's go to main menu component.html

instead of this paragraph let's paste

that HTML so here we have a div with

this class ecart menu so let's go ahead

and let's copy the CSS for this class

from header component dot CSS

so somewhere we should have the main

menu okay this ecart menu let's cut it

from here

let's go to main menu component.css file

in there let's paste it

let's see if the changes let's go to

main menu component.ts file from there

let's get the selector again instead of

calling it app main menu I'll simply

call it main menu

I'll copy this selector

and again let's go to

headercomponent.html and after this

comment

let's use that selector

okay with this let's save the changes

let's go back to our application

and you can see that main menu

all right it looks great but for some

reason it has shifted a bit left but

that's okay for now

let's go back to vs code again let's go

to headercomponent.html and from here I

also want to remove this search bar so

so

in the web page

we also have this search bar I don't

want it in the header

so I'll simply go ahead and I will

remove it from here

okay and from the header component.css

let's also go ahead and let's remove the

CSS for that search bar so we want to

remove this ecart search bar

record search box

and ecard search button

let's go to the web page

and that search bar has been removed

all right so this is all from this

lecture in this lecture we learned how

we can create an angular component using

angular CLI and also if I go back you

will notice that these two components

which we have just created this main

menu and top menu if I go to

appmodule.ts file there you will notice

that those classes are automatically

declared here inside this declarations

array

okay so when we use angular CLI we don't

have to do these things manually angular

CLI will take care of that