How to create a Component in Angular 8
To create component in Angular we can useng generate component "component name" command from Angular CLI.
Note:- you can do so : ng g c user –spec=false ( it will not generate .spec file).
let’s see what this command is doing:
ng : stands for angular CLI object.
generate: is used to generate any file (you can also use g (short name) instead of generate).
component: it means we want to generate component(you can also use c(short name) instead of component).
Component Structure
Template :- It is the view layout of the component , it tell the component what would be render for viewClass :- It is component class that will have properties and methods that will use by view
MetaData:- This provide additional information to angular about component by Decorator, Metadata tells Angular how to process a class
#Class
In Angular we create class like with class keyword followed by className (here it is infoComponent), here we have used export keyword that is ES6 module system. Export keyword here mark this class as public so that we can use it in other files by importing it .#MetaData:-
Typescript class will not act like a Angular Component until we don’t attach additional information with metadata and to add metadata we use Decorators.
Decorators are the methods which start with @ symbol. So in this @Component is a decorator which is taking object ({} ) as argument which will allow us to pass metadata.
@Component() decorators will have lot of keys that will be used to define our component.
selector : selector key is used to define the tag name for the component . Now we can call app-user like a custom html tag "app-user" from any html template
templateUrl: Every Component will have a attached template that will work like a view . So whenever this component will render it will display view to the user and that view will come from this template file
styleUrls: Every Component have their own style that will come from file which you will mention in styleUrls. It takes array as value so we can pass multiple css files
@Component is a predefined decorator which we need to import from @angular/core library.
Comments
Post a Comment