Understanding Angular Components

Jinal Shah  Print 
26 Aug 2018
 
Intermediate
231

Hello Readers, today you will learn about Angular components. I have added many images, to make it easy to understand for my readers, which make this article to appear a little longer. However, what’s meaning of diving, if the water is shallow. Right!? So get set and here we go!!

Component

Angular components are building blocks, which in turn forms an Application. In a simple language, think our ecosystem as an Application. Then, water, temperature, oxygen, carbon dioxide and many more biotic and abiotic factors make the whole ecosystem to work as an application. Now, the same concept applies to our Angular application as well. Our app has many components such as, header, footer, sidebar which in turn results as an app.

Typically, it is a type of directives with template, styles and logic for user interaction. It is exported as a custom HTML tag like as: <my-component></my-component>. The angular component is initialized by angular dependency injection engine.

Angular Components Page View

A webpage containing an article with comments, categories, news feed and header, footer can be manage using the angular components as given below:

Angular Component Advantages

Now, you all must be thinking, why should we use components? Component inculcates many benefits to that of Angular itself. It provides:

  1. Reusability

    If same functionality should be exposed in multiple places then, we can reuse it in all these places.

    Say for example, we have two components: Header and footer. Which should be included at About Page and Contact Page. Then we simply need to add one tag (which we will cover later in this article) and, your work is done!! You don’t require to add header and sidebar code at each place.

  2. Testability

    It is quite easy to unit test an individual component then whole unstructured application.

  3. Consistency

    If you know how to structure and write code for one component then, consistency will be there in every component.

  4. High cohesion:

    Components will have functionality only related to itself.

Difference between Component and Directives

Now, the folks familiar with Angular 1.x might be in dilemma that what is actual difference between Component and Directives Right!? The major difference between both of them is Directives actually add behaviour to existing DOM element while Components creates its own view with attached behaviour.,

Creating A Component

Next, the question arises in our mind is how Angular identifies the components among many other files? The answer is that, if you open any ts file of the component, you will see @component metadata and below it, there will be one class. The @component decorator is responsible for identifying the class as a component and for specifying its metadata.

Now, let us move towards creating our first component. Initially your app structure will look something like this:

Now, the first inbuilt component that you see is, app. Now, looking at this, you can assume the basic structure of a component. It consists of 4 files: HTML, CSS, TS, SPEC.TS.

Our APP.COMPONENT.HTML file looks like this:

This file has been created by Angular. It the basic HTML file. If you run this app, the first page you’ll see as an output, will have this HTML written there.

Next file is APP.COMPONENTS.TS:

As I have mentioned earlier, you can call component this at any other component by the selector.

TemplateURL depicts the corresponding HTML file for this TS file and last is styleUrls which represents the styles used by this ts file. Note that this is an array. You can always mention more than one CSS file for one TS file.

Let me just highlight one phenomenon, if you want to use any component call it by its selector name. Let's for example, I want to use demo component at the demo1 component, then I simply need to call demo’s selector <app-demo></app-demo> (say for example). This will render demo's HTML at demo1's HTML.

Now, let us create our first component by firing the given below command:

ng g c component_name)

(g stands for generate and c stands for Component)

You can open this terminal using VS Code from (view -> Integrated terminal). As we have previously discussed, a component has 4 files inside it. One new message you'll see is regarding app.module.ts. It is the heart for our app. It contains the global declaration for our all components. After creating a component, our app.module.ts will look like as:

Our component should be imported and added to the declaration array.

Nested Component

Now, if you want to see the task component’s HTML as your output. What would you do!? Remember that Selector concept? Yes, you have to add task’s selector at APP.COMPONENT.HTML. (Because it is the first component which is being loaded by angular, if you want to check how? Check you index.html, there you will find <app-root></app-root> which is selector for app component).

And here is your output in browser

And with this, we have learnt a new concept called Nested Component. In Nested component, we call one component inside another component. The component in which we have called the another component, is known as Parent component and called component is known as Child or Nested component.

Summary

So, components are the essential part of an Angular application. In every application you will use it, even if you are building a normal app. In short, components are blocks which together make an Angular application.

Hope you have enjoyed reading this article. Keep going and coding!!

Hands-on Learning
Free Interview Books
 
+