Hello friends, how are you guys? I hope you are well and welcome to this article. In previous article we describe AngularJS. Now We will read about a very important concept called components in Angular. I will also tell you the practical part of it. You know that Angular is the main building block of an Angular application, so our Angular application comprises many components. We say app components.
AngularJS Component:
Inside a component, there is data, which we often fetch through a service. We also write interaction logic within the component, such as what happens when a user clicks a button—whether data is submitted or another action is performed. This logic is part of the user interaction, which is handled in the component. The view, which is the HTML view, is also part of the angularJS component, and the style, defined by CSS, is another part of the component.
A AngularJS component is essentially a plain Type Script class, but it becomes a component through the use of a component decorator. Now, as you can see, a component has two main parts: the view and the class. The view is where we define the HTML template, and the class is where we write the logic. To send data from the class to the view or vice versa, we use bindings. There are two types of bindings: event binding and property binding.
Let’s go through a basic angularJS component diagram. Inside the component, there is a template (HTML) and a class file. In the class file, we define all the logic. There is also metadata, where we specify the selector for this component, the HTML file that will be called, and the CSS file that will be used. This metadata is crucial as it ties everything together.
If we want to pass data from the template to the class, we use event binding.
For example, when the user clicks a button or hovers over an element, we can handle these events through event binding. Conversely, when we send data from the class to the template, we use property binding, often with interpolation.
Basically the angular components are main blocks of screen view. This is based on typescript, HTML and css.
- Angular HTML template shows what is rendered on a web page.
- Angular CSS that defines how the HTML component shows on page.
If you want to see from official documentation, click here “Angular Official Documentation“.
How to creaate AngularJS Component:
There is a way to create angular components using angular CLI. But you also create a component manually.
Component using CLI:
- Go to the terminal window, by navigating to the directory of your app.
- Type ” ng g component <component name> ” and run the command.
Component by manually:
By the way, creating angularJS components by CLI is the very best way. But if you want to create components manually then here are the steps. In the manual process you need to create the core file component within the angular app.
Step to create component manually:
- Go to the project directory where you want to create the angularJS component.
- Create a new file with the name <component-name>.component.ts
- Then use the “import” statement, and add “@component”.
- Use CSS selector for the component.
- Mostly we use separate template HTML files.
Specifying CSS Selector for Component:
All angularJS components need to have a CSS selector. Wherever it locates the matching tag in the template HTML, Angular is instructed by a selector to instantiate this component. Take the component hello-world.component.ts, for instance, whose selector is defined as app-hello-world. This selector tells Angular to create this part if a template has the tag <app-hello-world>.
Angular Decorators
Now, let’s explore the decorators in Angular and the different types available. Friends, you know that Angular is a JavaScript framework, specifically a type-safe one. When working within a framework, it’s important to follow established patterns and rules. For instance, if I talk about the decorator tag, it tells Angular what a particular file is and its purpose.
For example, if we have an app module file, the decorator will provide Angular with its complete metadata, helping it understand what the file is meant for. A common decorator is “@NgModule”. This decorator, marked by an “@” symbol at the beginning, informs Angular that the file is a module. This module can contain declarations, imports, exports, providers, and more.
Similarly, if we look at the TypeScript file for a component, the decorator tells Angular that the file is a component directive. We can have various decorators in Angular, such as @Component, @NgModule, and others. As I mentioned, decorators are used to specify what the file is for and what it contains. For example, the @Component decorator indicates that the file is a component, which will have a selector, HTML, and styling.
