Angular Components

In the previous module, we have learned about Angular and why we use Angular over AngularJS. We also learned about the installation of Angular and some basic setups to run an Angular app.

Now we’re ready to move into the second module, i.e., basic concepts of Angular and explore Angular to the fullest. We’ll start with Components in Angular in this tutorial.

What are Angular components?

Components are the basic building blocks for an Angular app. It’s consist of:

  • A Template that represents the view of your app.
  • A TypeScript class is used to write logical expressions.
  • Metadata is used by Angular API to execute the location HTML and CSS files.

Now let’s move forward and see how to generate components in Angular. To generate components, follow the steps mentioned below:

Step 1: Open your window terminal and move to your app folder.

Step 2: Type the command mentioned below:

ng generate component <component-name>

angular create component using ng generate

  • ng generate component is the command used to generate new components in the Angular app.
  • <component-name> is the name of the component we generated. You can name it with your choice.

NOTE: We can also use a shortcut to generate components by using the below command.

ng g c <components-name>

angular create multiple components using ng generate

After executing the above command, it’ll automatically generate a folder with the name we mentioned when generating the component. This folder will contain the following files:

  • A <component-name>.component.ts file, which we basically use to import various packages and write the logical expressions.
  • A <component-name>.component.html file where we write mark-up or the HTML content to be rendered.
  • A <component-name>.component.css file is used for styling purposes.
  • A <component-name>.component.spec.ts file is a testing-specific file used for testing purposes.

angular component working example

In the end, we can serve our app using the ng serve command, and it will show “component-name works” on the browser by default.

Conclusion

After the installation, we learned the first basic topic of Angular. Components are very important for SPAs(Single Page Applications) because we can break complex websites into different components and serve as per user required without the page reload. This makes Angular so popular, and it also boosts the performance of highly trafficked websites. In the upcoming tutorials, we’ll move into some other basic topics of Angular.

Read Next: Angular Interpolation

Leave a Reply

Your email address will not be published. Required fields are marked *