How to work with Angular Components

Hi guys! In my previous article, I started how to create a new Angular project. Now I'm going to explain you how to work with the components available in Angular JS. As you know, Angular deals with Single Page Applications. So many different things can be loaded into one page using Angular. No need to create separate pages for each part. It is the main advantage of using Angular to develop web applications.

First of all we have to select a better text editor to use for coding in Angular. Usually Visual Studio Code is considered as the best editor for Angular applications. I'm also using it and you can download it from here.

Open the project created; sampleApp, from VS code editor. You can see a bunch of files in this folder. Here I will not explain all those files one by one. To give an abstract sense on those files, I will show you the things included in Angular official web site. If you don't want to read them, just ignore. They will not affect much for the rest of the tutorial.

 

 

Now navigate to your project folder from cmd or terminal and run it using  ng serve command. There's an important thing to be remembered. After you started the project from cmd/terminal it is in active mode. If you need to use cmd for another task, you can not use it. So be sure to start another separate cmd/terminal to do the other work. Let the previous cmd to steirt and compile the project for you.

Components

Component is a part like a controller in MVC architecture. They can be used to create a web page layout easily.
         For an example, imagine that you want to create a view with a navbar, body and footer. This is the layout. Then you can create a separate components for both navbar and footer. Each of those components will include HTML, TS, CSS files. I will show you from an example.

Every component must contain a HTML file, TypeScript file and a CSS file. Apart from them there can be a spec.ts file.

Whenever a component is created, it must be imported and included in declarations in app.module.ts file. Default project has only the AppComponent. Look at the imports and declarations.

We use cmd/terminal to create components. If we create manually, we will get into trouble since a component is having a bunch of default codes needed to be included as soon as it is created.

Create Components

According to the example I mentioned now I will create two separate components for the navbar and footer.

• Create a new folder called components in /src/app using VS Code editor.
• Open the cmd and go into the /src/app/components folder.
• Now enter the following commands.

            ng generate component navbar  OR  ng g c navbar

            ng generate component footer OR  ng g c footer

Now open the app.module.ts file in VS Code. You can see the imports and declarations have been changed! The newly added components are automatically included in this app.module.ts file. It is done by Angular CLI for our ease.

Now I'm going make some changes in src files. 

• First open app.component.html file and change the <h1> tag to {{title}}. Remove the <ul> tag and the line "Here are some links to help you start:".
• Then open the app.component.ts file and change the title value to "Angular Sample App".
• Now you have the view like this.

Now I need to display the newly added navbar and footer in this view. How to do it? Let me explain!

The content included in the src/app folder is the most important part of a project. I told that a component must be included in app.module.ts file to use anywhere in the project. Now it has done for navbar and footer, by the Angular CLI. Angular assigns a selector name for every component we create. Usually it has a format like this - "app-component_name" ; Ex : app-navbar

These selector names are used to pass a component to the view. 

What is index.html file?

It is the file that loads by the Angular framework to be displayed in the web browser. This page will be displayed whenever we run the project. Carefully look at the code in this file. You can see a selector name called app-root. In our project, this selector name is reserved for app component by default. Everything connected in app-root will be displayed by index.html file. I think you got it! Further you can remove the app-root tag from index.html file. What happens? All the things displayed was disappeared! A blank HTML file will be displayed now. So, if you want to display something in browser, you can add them to the app component HTML file. Then it will be taken by index.html file.

Now follow me to handle our new components!

Look at the code in navbar.component.ts and footer.component.ts files. For each component, there are selector, templateUrl and styleUrl. By Angular framework, a sample code is given for every HTML file that belongs to a component. Here, default codes have been added for the two components; navbar and footer, by framework itself. The codes are like this.

<p>
  navbar works!
</p>

<p>
  footer works!
</p>

Take the selector names in the TS files and place them in the app.component.html file like element tags. See the below code.

When we include the selectors in app.component.html file, they will be displayed in browser. The default code is shown. If we want, we can change it according to our design.

So this is the new view of index.html file now. In my next articles, I will design a proper navbar and footer and will create a better view. This is enough to understand about components. I just needed to give you an idea on working with Angular components. So try out this! As a new comer to Angular world, I am very interested now to learn this amazing framework. I'm sure you will also like this and try to learn! As soon as I learn a new part, it will be on my Blog definitely. Keep in touch...
Good Luck!