Angular 2+ components (practical reference)

The basic unit of any Angular Application is the component

This post summaries the common tasks with components and can be used as a pool of useful code snippets

  • Creating
  • Data binding – one way and 2-way
  • Using ngIf and ngFor to create dynamic template content
  • creating and communicating with nested components

Creating a new Angular App

The generated a simple app with one main component and one module:

  • app.module.ts – the main module class
  • app.component.ts – the parent component code
  • app.component.html – the parent component template
  • app.component.css – the parent component styles

Integrating Twitter bootstrap

now open the file .angular-cli.json (in the project root directory) and add the bootstrap css to the styles section:

restart the web server to see the result (Ctrl + c , ng serve)

Adding Forms Module

To use forms components you need to import the Forms Module, add the following code to the main app module (app.module.ts)

DataBinding

One way – from code to template

Interpolation – code:

template:

 

Property binding – code:

template:

Note that the following 2 ways have the same results:

 

One way – from the template to the code

Events and event handlers

Button click event

Code:

 

Input key event

you can send the event object using $event:

Code:

you can send any data you like – for example calculator buttons calling the same event with different values:

 

2-way data-binding

textbox

Code:

 

Checkbox

Code:

 

select

Code:

 

Built in directives

If Statement

displays the content of num3 if the condition is true, otherwise displays nothing

 

if-else

 

2 templates

 

For Statement

  • Create a list of template elements
  • Put the ngFor on the element you want to duplicate
  • Iterate over a data structure (array or any collection)

Code:

template:

Add index to each item:

Simple loop, fixed size

Simple Loop, dynamic size

Template:

 

Table with ngIf and ngFor

Displays the table only if the array is not null and contains elements

ngStyle

code:

Template:

 

ngClass

In the CSS file (or inline style)

 

Nested components

 

Creating a new component:

using inline style and template:

Creating the new file(s) in the same directory

 

Input parameter

In the child component add:

bind the variable to a template item

In the parent component declare a child using the child selector and send the value

Or:

ng-content

You can add any element between the child tags and use it in the child component using <ng-content>

Parent:

child:

 

Output parameter (event from child to parent)

Child – Declare output variable

somewhere in the child code raise the event to the parent:

Parent

 

2-way databinding

 

This syntax

is equal to:

 

To make 2 way databinding between the parent and the child declare the following at the child component:

 

 

 

Now, in the parent component add:

 

 

ViewChild

You can declare a child component object in the parent class and access its properties and methods using code for example:

Child

 

In the parent class declare:

 

The above decorator attach the object to the first instance of the child component found in the template – if you have only one child, you can access it using code:

 

ViewChildren

 

If you have more than one instance of comp3 you can declare it using:

Now declare also

 

 

 

 

 

 

 

 

 

 

Tagged

Leave a Reply

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