4. Component creation and nesting

Components are the main building block for Angular applications. They control patches of screen called views, which are sets of screen elements that Angular can choose among and modify according to your program logic and data. 

Each component consists of:

• An HTML template that declares what renders on the page
• A Typescript class that defines behavior
• A CSS selector that defines how the component is used in a template
• Optionally, CSS styles applied to the template

a. Creating components using the CLI

To create a component using the Angular CLI:

1. From a terminal window, navigate to the directory containing your application.
2. Run the ng generate component <component-name> command, where <component-name> is the name of your new component.

ng generate component example

By default, this command creates the following:

• A folder named after the component.
• A component file, example.component.ts
• A template file, example.component.html
• A CSS file, example.component.css
• A testing specification file, example.component.spec.ts

b. Understanding the component file

We define a component’s application logic—what it does to support the view—inside a class. The class interacts with the view through an API of properties and methods. This class is just a normal class unless and until we mark it as a component with the @Component decorator.

i. The @Component decorator

   The @Component decorator identifies the class immediately below it as a  component class, and specifies its metadata. 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. In addition to containing or pointing to the template, the @Component metadata configures, for example, how the component can be referenced in HTML and what services it requires.

Here’s an example of basic metadata for ExampleComponent:

@Component({

 selector:    ‘app-example’,

 templateUrl: ‘./example.component.html’,

 styleUrls:  [ ‘./example.component.css’]

})

export class ExampleComponent {

/* . . . */

}

ii. The selector

A CSS selector tells Angular to create and insert an instance of this             component wherever it finds the corresponding tag in template HTML. For example, if an application’s HTML contains <app-example></app-example>, then Angular inserts an instance of the ExampleComponent view between those tags.

iii. The templateUrl

The templateUrl is the relative path or absolute URL of a template file for an Angular component. It defines the HTML template that the component uses to display information. In most cases, this template is a separate HTML file. A template is a block of HTML that tells Angular how to render the component in your application. You can define a template for your component in one of two ways: by referencing an external file, or directly within the component.

To define a template as an external file, add a templateUrl property to the @Component decorator:

@Component({

  selector: ‘app-example’,

  templateUrl: ‘./example.component.html’,

})

To define a template within the component, add a template property to the @Component decorator that contains the HTML you want to use:

@Component({

  selector: ‘app-example’,

  template: ‘<h1>My Example</h1>’,

})

If you want your template to span multiple lines, you can use backticks ( ` ). For example:

@Component({

  selector: ‘app-example’,

  template: `<h1>My Example</h1>

             <p>This template definition spans

              multiple lines.</p>`

})

iv. The styleUrls

You can declare component styles for its template by referencing an external file. To declare the styles for a component in a separate file, add a styleUrls property to the @Component decorator.

@Component({

  selector: ‘app-example’,

  templateUrl: ‘./example.component.html’,

  styleUrls: [‘./example.component.css’]

})

As we know, to render or display a component, we need to use the selector as follows:

<app-example></app-example>

But we can also create nested elements using the selectors. For example, we need a pair of nested components as follows:

To display this, we can use the selectors as follows:

<app-componentA>

<app-componentB></app-componentB>

</app-componentA>

Here, component A is known as parent component and component B is known as child component. This is known as nesting elements.

Quiz:

What is an Angular component?

a) A building block of an Angular application

b) A module that encapsulates the app’s logic

c) A service that handles data communication

d) A routing configuration for navigation

Which decorator is used to define an Angular component?

a) @Component

b) @Injectable

c) @Directive

d) @NgModule

How do you create a new Angular component using the Angular CLI?

a) ng create component MyComponent

b) ng generate component MyComponent

c) ng make component MyComponent

d) ng add component MyComponent

What is the purpose of the “selector” property in an Angular component?

a) It defines the component’s HTML template

b) It specifies the component’s CSS styles

c) It provides a way to reference the component in other parts of the app

d) It determines the component’s input properties

What is the purpose of the “templateUrl” property in an Angular component?

a) It defines the component’s HTML template

b) It specifies the component’s CSS styles

c) It determines the component’s input properties

d) It provides a way to reference the component in other parts of the app

What is the purpose of the styleUrls property in an Angular component?

a) It specifies the location of the component’s template file

b) It defines the CSS styles to be applied to the component

c) It lists the URLs of external libraries required by the component

d) It determines the routing configuration for the component

What is the purpose of the template in an Angular component?

a) To define the component’s HTML structure

b) To define the component’s business logic

c) To define the component’s styles

d) To define the component’s dependencies