Angular 5 Components Tutorial – A 5 Minutes WalkThrough

0

The following Angular 5 components tutorial will give you an overview and basic understanding of how components work in Angular 5.

We already learned about How to install Angular 5 and set up the first project with Angular 5.

Now, let’s see how we can play around with components, understand it’s basic structure and generating components using Angular-CLI.

Overview on Angular 5 Project Structure

If you’ve already created your project and you open it in code editor, it will look like this.

> e2e
> node_modules
> src
.angular-cli.json
.editorconfig
.gitignore
karma.conf.js
package-lock.json
protractor.conf.js
README.md
tsconfig.json
tslint.json

In most of the times, when we’re developing we just need to work with the /src/ folder.

What are Components?

Components are basically a traditional class which we are creating differently using Angular structure.

A class can have members, methods and overall interaction with the view and model (database) part of the application. Here, components are playing the similar role of a controller which we are using in our traditional MVC applications.

Components are reside within the /src/app folder.

The following is the basic structure what we can see for a component files.

> src
	> app
		app.component.css //A app component css file.
		app.component.html //A app component HTML/Template file.
		app.component.ts //A app component class file.

Whenever you use Angular CLI to create a component, it actually shows this kind of default folder structure.

Suggested visit: Understand How Angular CLI works with Angular apps

Basics of Angular 5 Components

Now, let’s see what is inside the component file generated by Angular CLI.

/src/app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'This is a Angular 5 Components Tutorial';
}

This is a traditional angular class with import and @Component decorator. The following are the takeaways from above component file.

  • Firstly, we’ve the imports, that section will allow us to import necessary libraries/modules which we want to use in this particular component.
  • Secondly, we’ve the @Component decorator which contains the selector (The HTML custom tag can be found in index.html), templateUrl (App component HTML/Template path) and StyleUrls (App component CSS file path).
  • Finally, we’ve the class with the export keyword, that can be imported to anyother components.

Angular 5 Component Example

As mentioned earlier, you can create needed component files using Angular CLI.

ng generate component home

This command will generate a component named Home with the following structure.

//This will be the template file
create src/app/home/home.component.html (23 bytes)
//This will be the spec file, you can ignore this file
create src/app/home/home.component.spec.ts (614 bytes)
//Component class file
create src/app/home/home.component.ts (262 bytes)
//Component css file
create src/app/home/home.component.scss (0 bytes)
//Updates on main app module.
update src/app/app.module.ts (467 bytes)

Here, you can notice that it’s creating required files of a component and it’s updating the main app module to provide the generated components path automatically.

Also, you can use shortcode to generate the components.

ng g c home

Finally, if you open the template file and write the {{title}}, it will print the value of title which we’ve defined in the app.component.ts file.

/src/app/app.component.html

{{title}}

This will basically prints This is a Angular 5 Components Tutorial on the browser window.

Note: You can run your application using ng serve command and that need to open an application in the browser at http://localhost:4200.

That’it, I hope now you have the basics knowledge of Angular 5 components.

Leave a Reply

Be the First to Comment!

avatar
  Subscribe  
Notify of