Explain Angular @component

Under traditional Angular learning methods, you would often skip the finer details. Often, they recommend you create a component for each view and partial view. But you will find that this approach is not very successful as the project scales.

This is partly because there is no official or much unofficial discussion about @Component ‘s idea, its functionality, when and where it is appropriate to use it.

Let us cover everything you need to know about Angular’s @Component in this article, including all the bits that beginners often rule out.

To get in-Depth knowledge on Angularjs you can enroll for a live demo on Angular Training

@Component

A component controls a screen patch, called a view. For example, in the Tour of Heroes individual components define and control each of the following views:

• The root app, with links to the navigation
• The Heroes List
• The Editor for the Hero

You describe the application logic of a part. It does help the view within a class. By an API of properties and methods, the class interacts with the view.

HeroListComponent, for example, has a hero property that holds an array of heroes. The component acquires the heroes from a service is a property on the constructor of the TypeScript parameter.

What is an Angular Component?

You may call this component the basic building block of UI design when it comes to official documentation, and is often associated with a prototype. Then this is as far as it goes before actually digging into the technical pieces.

Take your career to new heights of success with Angularjs Online Training

Angular @component

Think of a quilted patchwork. Each rectangle, triangle, or whatever geometric shape is an integral part of the overall blanket. All of the various components add up to make up a whole.

This is basically what components are in Angular. Let’s take a look at its component form in the traditional To-Do app.

In the above illustration, there are two views — or separate pages. These views are made of specific pieces that can be used again.

The blue highlights where code can potentially be reused making it a component that can be used again. This reusable component is placed inside a tab-which is also a component itself.

It is not assumed that a page component can be reused-unless it is within another object. Hey. You can have one component inside a component (and so on, so on).

Your root component is at the very top of your nested view, and is shared by every view in the application. This space is often reserved for headers and footers which, if state management is needed, can also be dynamic components themselves.

Use of Angular @component

Components have the concept of serving as the building blocks for your vision and functionality.

Based on behavior and requirements components can be abstracted.

You should consider turning your code into a component if you answer yes to one or more of the following questions.

Multi-place view and functionality

It was a particular portion of a website not modified as much as the rest of the code. Abstracting these codes out an act optimization and we call it components for optimization.

Get More Info Here Angularjs Online Course

Code in an Angular @component

If you are using the Angular CLI you can use the following command to generate the scaffold for a working component automatically.

ng generate component your-component-name-here

Angular CLI for Angular @component

The Angular CLI is a console that can be installed via npm to generate different parts of an Angular app-or the entire Angular app itself.

This means less work from scratch and more time for actually working on the app. This offers you a structured boilerplate, which ensures you can know what to expect when going from project to project.

When you know what to expect and have a general idea about where things are, life as a developer becomes a lot easier.

Angular CLI stands for Angular Command Line Interface and does the heavy lifting for you most of the manual.

For example, it automatically adds an import module to the app.module.ts file when you add a new component via the CLI, too.

It’s good to note that when you’re generating a service through the CLI, it doesn’t add it to the app.module.ts file as components do. You can also use an alternate version of the angular directory.

ng g c your-component-name-here

The code will be as follows.

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
constructor() { }
ngOnInit() {  }
}

The above code has three parts — Import, @Component and Exported Class.

The import portion from @angular or core pulls in the Component and OnInit modules. This allows you to use the @Component decorator, which essentially tells Angular the meta-data needed to make it possible for a component.

The selector informs us what is called the part, and what will allow it to make in other components. This means that if you want to show the above part, simply call it in the form of a pair of tags — < app-test></app-test >.

The templateUrl lets the component know with which view it is related. You may construct a prototype inline, in principle. The Angular CLI merely abstracts it into another file for the readability of code and references it using templateUrl.

The same treatment is applied via styleUrls to the component specific style sheet.

The class that immediately follows exports itself as a module that is automatically declared by the Angular CLI in the app.module.ts file. Inside this class, all your data and coding magic occur to be displayed on the associated view.

Where you don’t use Angular components?

Abstracting a UI into different and functional parts is easy. One big space where components should not be made, though, is when you need to manipulate the DOM.

You look at the data while you abstract the component code and not at how the visual effects are behaving. That is what the directives attribute is about.

How can you tell the difference between manipulating DOM and stuff like ngFor and ngIf that alter DOM?

In fact, ngFor and ngIf are attribute directives which just happen to be incorporated into Angular. We have the power to alter the structure of the DOM by adding and removing elements of the DOM depending on other circumstances.

When you need to build a non-pre-built DOM manipulation yourself, it should be abstracted into an attribute directive and used within the component accordingly.

Not all judgments are equal

Abstraction can be a blessing to the quality of code. But it is also a curse to over-abstraction.

Your code also shows the first symptoms of over-abstraction as being messier than it should be after the abstraction.

The point of abstraction is to make the reading, upgrading, and reuse of your code easier. However, if your code breaches these issues after your abstraction, then it means you have made each element too small for their own practical good.

Sometimes it can be excessive and daunting to create tons of tiny parts for an application that has not grown big enough yet. In this case, keep your components as they were and don’t start breaking them down until more data is available on the page to process in code form.

Conclusion

I hope you reach to a conclusion about the Angular @component. You can learn more from Angular online training.