An Introduction to Angular Components

Every Application has an important building block, the UI, and a Component in Angular is the basic unit which helps to build a UI. In general user terms UI is referred to as a view. 

Components are basic building blocks which consist of an HTML template that declares what renders on the page, a class written in TypeScript which defines the behaviour, a CSS selector which defines how it can be used in the template and CSS styles which define how it will look when a user views it. 

If you’re a programmer by profession and have some fundamental knowledge of user experience, the above diagram will help you to understand about the internal structures of components. 

Let’s take an example to understand components in a better way, and consider that we are building a page for an application. The features in the page include the header, footer and navigation and content area. Instead of building a single page with all these features, we can choose to split the page into components, which help us to manage our application.

In the above scenario, we can say that the header, footer, content area, navigation and so on are separate components of the page; but when the user views it on the website through any device, it will show as a single page.

Next, we will find out how to build components, and what is the internal structure of components.

Components are comprised of Template, Directives and Data bindings. Before creating a component, we should get an idea of what these are. 

Template – A template combines HTML with Angular mark-up, to modify HTML elements before they are displayed. 

It’s an HTML file which displays information. 

Here is an example of a Template: 

Directives – Directives form an important part of a component. They provide the program logic to the component. 

Here are some examples of directives: *ngFor, *ngIf 

Data Binding – Data binding is the process that establishes a connection between the application UI and business logic. Without this, no component in Angular can become functional. 

Here is an example of Data Binding: 

The metadata for a component tells Angular where to get the major building blocks that it needs to create and present the component and its view. In particular, it associates a template with the component, either directly with inline code, or by reference. Together, the component and its template describe a view. 

Example of metadata:

Here in the above example, the selector, template URL, and providers consist of metadata which tell where to get the major building blocks.  

Next, let us learn how we can configure a component in a project. 

The easiest way to create a component is with the Angular CLI. You can also create a component manually.  

Creating a component using the Angular CLI

From a terminal window, navigate to the directory containing your application. 

Run the ng generate component <component-name> command, where <component-name> is the name of your new component. 

By default, this command creates the following: 

Creating a component manually 

After the import statement, add a @Component decorator. 

Choose a CSS selector for the component. 

Define the HTML template that the component uses to display information. In most cases, this template is a separate HTML file. 

Select the styles for the component’s template. In most cases, you define the styles for your component’s template in a separate file. 

Add a class statement that includes the code for the component. 

For more details information on creating an Angular component, the reader can go through the official website of Angular ref

We are now going to learn another concept in terms of the uses of Angular components. Let’s talk about the use of Aliases for importing components. 

When working with Angular projects in real time, we might come across a scenario where we are required to remember a long relative path for a component in an Angular file. This often proves to be difficult, and it makes the application messy and complex to read, especially if you are new to the team. This is where Aliases come to the rescue. 

You might come across something like:

In the above example, we should use aliases for relative paths to improve the readability of the code. 

To achieve this in your Angular application, all you need to do is to update the tsconfig.json file. 

If you look at the above configuration, the default property of the baseUrl property was updated to ‘src’ directory. Then, we added a new property called paths, which is an object containing key-value pairs representing aliases defined for the paths in our application. 

The above code can be rewritten as shown below: 

Like Aliases help in code readability, Lazy load is also a very useful Angular feature. 

Let’s Understand Lazy Load in terms of any programming language: 

As the term itself suggests, a Lazy Load is loaded late and only when needed. To understand this in a better way, consider a VIEW MORE button on any web page of an application. When we click on this VIEW MORE button, it loads the rest of the content and displays it to the user. 

In a similar way, in Angular applications, we have several such components which are not very important. Only when the user wants to view these components, they must be loaded. We use Lazy load in such scenarios, as using this feature will make the best use of time and space in applications. 

There are two main steps to setting up a lazy-loaded feature module: 

To understand in more detail, with some sample code, please go through this reference URL where it is explained very well by the Angular Team

In the example below, the LOAD MORE Button is created using the lazy loading concept. Visitors can view more blogs only if they are interested by clicking on this button.

Conclusion: 

I hope this blog will help readers to understand some basic concepts of Angular components and their structure. To explore more advanced concepts and delve deeper into Angular 2-11,  visit this link.

Research & References of An Introduction to Angular Components|A&C Accounting And Tax Services
Source

Share on Facebook

Tweet

Follow us