Angular Components (With Examples)
- Component decorator consists of many metadata properties or attributes, but in this article we will see the most frequently used five properties with an example those are selector, template, templateUrl, style and styleUrl.
- Template – – – – It is used to specify the html which is shown as an output to the user – – Important Note – – – – In the above code, selector: ‘my-App’ will refer to the before mentioned index.html which is the starting page of our application…
- Negative Test case Example: [using both template and templateUrl] – – If we run the above code , then we won’t get an output and in the console tab we would able to find the error message like the below snagit.
- You can name it anything you want, but by convention it is named AppModule – – Important Note – – – – Once we entered our second component in the app.module.ts file, we can inject that component in any other component by using their selector.
- Exact line in Component 1(app.component.ts) where nesting happens, – – if you don’t register your component in the app.module.ts file and try to use it in the other components, then you won’t get the output and console will show the following error.
A Component is nothing but a simple typescript class, where you can create your own methods and properties as per your requirement which is used to bind with an UI (html or cshtml page) of our application.
@CsharpCorner: #Angular Components (With Examples) by @karthikstorms cc @CsharpCorner #AngularJS #Angular4
Brief Info About Component
A Component is nothing but a simple TypeScript class where you can create your own methods and properties as per your requirement which is used to bind with a UI (html or cshtml page) of our application.
In Angular 2, normal TypeScript class will become a Component class once it has been decorated with @component decorator.
@component decorator provides an additional metadata that determines how the component should be processed, instantiated, and used at runtime.
We can also say that Components are the most basic building blocks of a UI in an Angular application
Components are also referred to as one of the types of directives just like a structural and attribute directive, which we will see in-depth in the upcoming article.
Finally, component must belong to an NgModule in order for it to be usable by another component or application. To specify that a component is a member of an NgModule, you should list it in the declarationsfield of that NgModule
Brief of @Component Decorators
Decorators in Typescript are like annotations in Java or attributes in C#.
Component decorator consists of many metadata properties or attributes, but in this article we will see the most frequently used five properties with an example those are selector, template, templateUrl, style and styleUrl.
Kindly refer this link for the complete list: https://angular.io/api/core/ComponentDecorator