Angular Components
So, what exactly is a component in Angular?
There are different way to look at this, I'll start with simple explanation; afterwards I will give a more technical description of what component are and how to use them.
When you are looking at a website and you see the menu, navigation, title, forms even buttons those can all be examples of component. "An Angular application is a tree of Angular components." So you see Angular components are what the building blocks of the actual application. When I first learned about component I didn't really understand this concept until I started to actually build a component myself.
There are three main properties a component must have, but before we talk about that lets look at a simple website and see what a component looks like.
Source: https://medium.com/codingthesmartway-com-blog/angular-material-and-angular-6-material-design-for-angular-6b1a3ee476f0
In this example "Menu" is just one component of the app. A component is defined using the @component decorator. Every component has a selector, template, style and other properties. Let's just focus on the first three for now. In the code below you will see the @Compenent decorator with the three things we said a component has A SELECTOR, A TEMPLATE AND STYLE.
Now what else does a component need to have, let's not forget the class, yes a component must has have a class in this example the class is: the MenuComponent class.
Once you've created your component you will need to define the component inside the root module (app.module.ts file). Once you've done that you will need to define the component inside the view or html file (app.component.html).
If this is all still confusing here is a great article that walks you step by step on building a calculator component. https://code.tutsplus.com/tutorials/beginners-guide-to-angular-4-components--cms-29674
There are different way to look at this, I'll start with simple explanation; afterwards I will give a more technical description of what component are and how to use them.
When you are looking at a website and you see the menu, navigation, title, forms even buttons those can all be examples of component. "An Angular application is a tree of Angular components." So you see Angular components are what the building blocks of the actual application. When I first learned about component I didn't really understand this concept until I started to actually build a component myself.
There are three main properties a component must have, but before we talk about that lets look at a simple website and see what a component looks like.
In this example "Menu" is just one component of the app. A component is defined using the @component decorator. Every component has a selector, template, style and other properties. Let's just focus on the first three for now. In the code below you will see the @Compenent decorator with the three things we said a component has A SELECTOR, A TEMPLATE AND STYLE.
Now what else does a component need to have, let's not forget the class, yes a component must has have a class in this example the class is: the MenuComponent class.
import { Component } from '@angular/core';@Component({ selector: 'menu', templateUrl: 'menu.component.html', styleUrls: ['menu.component.css']})export class MenuComponent { }Once you've created your component you will need to define the component inside the root module (app.module.ts file). Once you've done that you will need to define the component inside the view or html file (app.component.html).
If this is all still confusing here is a great article that walks you step by step on building a calculator component. https://code.tutsplus.com/tutorials/beginners-guide-to-angular-4-components--cms-29674
Comments
Post a Comment