In this video we are going to learn about component.
Components are the most basic UI building block of an Angular application.
An Angular app contains a tree of Angular components.
Angular components are a subset of directives, always associated with a template.
Component encapsulate the data, logic, and HTML for a view.
3 steps to work with Component:
Create a component.
Register a component in a Module.
Add an element in a HTML markup.
Now lets see how can we create a component in Angular 10.
For that switch to project and here open command prompt.
Now for creating new component so run the command.
Alright now component has been created.
Component command created 4 files.
user.component.css — .css file is used for storing styles for this component.
user.component.html — .html file is used for storing template.
user.component.spec.ts — .spec.ts file is used for writing unit tests for this component.
user.component.ts — and .tx file is actual class component.
Now lets switch to the project and here go inside the src.
Then app and here you see the components folder.
Inside components folder you can see these 4 files.
Now just open app.module.ts file.
You can see here an user component has been added here here automatically and also added inside the imports.
Now lets add some text into user component.
So goto the user.component.html file and here just add a text inside the h1 tag.
Now save it and now go to the app.component.html.
Here remove all text and just add here.
Now save the file and run it.
So switch to command prompt and run the command.
Now its compling the application.
Now here you can see the user component.
If I add more text in user component.html file.
Lets aadd here
Save file and switch to the browser and you can see the text.
So in this way you can create component in angular 10.
Components are the most basic UI building block of an Angular application.
An Angular app contains a tree of Angular components.
Angular components are a subset of directives, always associated with a template.
Component encapsulate the data, logic, and HTML for a view.
3 steps to work with Component:
Create a component.
Register a component in a Module.
Add an element in a HTML markup.
Now lets see how can we create a component in Angular 10.
For that switch to project and here open command prompt.
Now for creating new component so run the command.
ng g c components/user
Alright now component has been created.
Component command created 4 files.
user.component.css — .css file is used for storing styles for this component.
user.component.html — .html file is used for storing template.
user.component.spec.ts — .spec.ts file is used for writing unit tests for this component.
user.component.ts — and .tx file is actual class component.
Now lets switch to the project and here go inside the src.
Then app and here you see the components folder.
Inside components folder you can see these 4 files.
Now just open app.module.ts file.
You can see here an user component has been added here here automatically and also added inside the imports.
Now lets add some text into user component.
So goto the user.component.html file and here just add a text inside the h1 tag.
<h1>User Component</h1>
Now save it and now go to the app.component.html.
Here remove all text and just add here.
<app-user></app-user>
Now save the file and run it.
So switch to command prompt and run the command.
ng serve –o
Now its compling the application.
Now here you can see the user component.
If I add more text in user component.html file.
Lets aadd here
<h2>Angular 10</h2>
Save file and switch to the browser and you can see the text.
So in this way you can create component in angular 10.
