Now we did the Angular 5 set up here
We did our base Angular 5 program startup and test here
Now in this part we will see about the Angular 5 Components.
So Let us start:
Angular components are considered as the basic building blocks of angular app.
Angular components can be found inside “/src/app” folder
Angular components is made up of:
- A component decorator, which help to set CSS, animations and many more
- Imports needed by the component to work
- A Class (here lies the component’s logic).
Let us generate components:
- Open the cmd in the <project_name> location
- Type the command
- $ ng generate component <component_name>
- You can also do this by using command
- $ ng g c <component_name>
- $ ng g c home
- The above command will generate the component with other files as:
- create src/app/home/home.component.html (23 bytes)
create src/app/home/home.component.spec.ts (614 bytes)
create src/app/home/home.component.ts (262 bytes)
create src/app/home/home.component.scss (0 bytes)
update src/app/app.module.ts (467 bytes)
- It also maps the new component in the app.module.ts as from above.
- Now if you check the above files let us go through each one by one:
- home.component.html : This file contains the html for the home component. All the html changes need to be changed for this component needs to be added in this file.
- home.component.ts : This file contains the logic need to be performed for this component under the class “HomeComponent” inside.
- home.component.scss : This file contains the CSS styling that needs to be added for the component.
Now in next level we will see Interpolation, Property Binding & Event Binding. Click Here