Image Description

Introduction

Angular is an open source JavaScript framework that is written in TypeScript. Developed by Google, it’s primary purpose is to develop single page applications.

What is good about Angular is that it has clear and standard structure and allows developers to write large and maintainable applications.

It is a very modern MVVM framework and platform and it is mainly used for enterprise Web Projects.

It is an opinionated framework, which means that it specifies a certain style and design that programmers need to follow.

What is a component

Let’s make a little definition on what is a component.

Components are the building block of an Angular application. These items will be interactive and would allow users to access the functionality and the data in the app.

It is a subset of directives.

In contrast to the directive decorator, the Component one must be associated with a template and it itself is a directive. It is a special kind of directive ( one of the three - Component, Structural directive and Attribute directive )

The Component has to be the driving force of the view and not the application. Complex logic has to be in a service.

When a component is instantiated, Angular creates a change detector, which is responsible for propagating the component's bindings.

Components have to belong to a module, in order to be used and available. To do so - put them in the declaration field of an NgModule metadata.

Component metadata


The decorator of the component is:


@Component({})This is a JS object and it is a function itself. It extends the Directive metadata and has the following properties:

  • changeDetection?: ChangeDetectionStrategy;
  • viewProviders?: Provider[];
  • moduleId?: string;
  • templateUrl?: string;
  • template?: string;
  • styleUrls?: string[];
  • styles?: string[];
  • animations?: any[];
  • encapsulation?: ViewEncapsulation;
  • interpolation?: [string, string];
  • entryComponents?: Array<Type<any> | any[]>;
  • preserveWhitespaces?: boolean;
  • standalone?: boolean;
  • imports?: (Type<any> | any[])[];
  • schemas?: SchemaMetadata[];


The Component has the selector and that selector is used as an HTML tag.


What is a template

The template is the HTML structure Angular uses to render the view.

In order to integrate it with Angular, a path to the html template has to be provided.

You can provide the HTML structure inline, as the value of the template property, but this method has to be avoided.

That’s why we are not going to dive into the template itself.


What is styles

Every HTML structure requires styling ( at least it should, most of the cases ). To do so, we have a property called styleUrls || styles

Nothing fancy to mention here. We can write inline css in the styles property ( not really recommended ) and point a path to a css file in the styleUrls.

One thing we have to mention tho - there is something called encapsulation. That is a property that isolates the styles for every component. This means that the styles won’t affect child or parent components.

The types are as follows:

  • ViewEncapsulation.Emulated is the default. It creates shimmed styling to emulate shadow roots and DOMs.
  • ViewEncapsulation.ShadowDom is the fastest if your browser has native support for shadow DOMs.
  • ViewEncapsulation.None, as suggested by its name, makes use of global styling and avoids any form of encapsulation.

What is a selector


Component

As a property of the Component, the selector is the main and unique block that Angular uses to identify different components.

When we create a component we have this:

The selector is represented as a string and when we inspect the element, we can see the:

<calculator>..</calculator> component in the HTML DOM tree.

Style class

It can also be used as a CSS element and be directly used as a class element. Example can be seen here:

It is important to notice the dot before the name of the class in the selector property!


Attribute

Another way of usage of the selector is to use it as an attribute. Create it as follows:

To use it as a property add the brackets “ [ ] ”

Inner structure of a component

Every component is essentially a class and it doesn’t extend some special behavior from Angular.

Every component has these special lifecycle hooks and structures.

  • component constructor
  • ngOnChanges
  • ngOnInit
  • ngDoCheck
  • ngAfterContentInit
  • ngAfterContentChecked
  • ngAfterViewInit
  • ngAfterViewChecked
  • ngOnDestroy