gravity4Tech

Data Binding in Angular

Filed Under: Angular Tutorial on Friday, October 9, 2020

DataBinding in Angular

§ Data binding is the mechanism for coordinating between the Template (DOM) and Component (Property).

§ Data binding means data flowing from component to template or data flowing template to component.

§ Data binding plays an important role in communication between a template and its component, and is also important for communication between parent and child components.

§ In Angular data-binding can be broadly classified into 3 categories.

Data Binding	Description
One-way data-binding	From Component to View Template
One-way data-binding	From View Template to Component
Two-way data-binding	From Component to View Template & From View template to Component

v One-way data-binding

§ we will discuss the first one-way data-binding i.e. From Component to View Template. We achieve this using interpolation

§ Interpolation is a way of all about data binding.

§ Suppose We create a new property in the AppComponent class and let's call it title and assignment the string.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular-Interpolation-Demo';
}

§ So now how do we get this title property value into template(app.component.html) file.

§ The answer is {{}} double curly braces and inside the {{}} double curly braces the specified the property in our case it is the title property and the syntax of a property or an expression within curly braces is known as interpolation in angular {{propertyName}} or{{expression}}.

§ By using interpolation, we are asking angular to evaluate the content inside the double curly braces and display the value when the component is rendered in the browser.

§ Using interpolation technique we can read data on a view template from Component, we place the component property name in the view template, enclosed in double curly braces: {{propertyName}}.

Example:-

§ In Component class(app.component.ts) file we define two property named siteName, siteUrl.now we try to access component class property into template(app.component.html)file.

app.component.ts

import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
siteName="Angular-InterPolation-Demo";
siteUrl=window.location.href;  
}

app.component.html

Site-Name: {{siteName}} <br/>
Site-URL: {{siteUrl}}

§ You can specify any valid expression in double curly braces also. For example, you can have

Sum= {{100+200+300}}

§ The above expression evaluates to 600

§ The expression that is enclosed in double curly braces is commonly called as Template Expression.

§ You can also use interpolation to set <img> src as shown in the example below.

§ Creating images folder: We will place all the images that we are going to use in "images" folder. We will have the images folder in the "assets" folder. So, add a new folder in the "assets" folder and name its "images" and copy the following 3 images. Name the images virat.png, rohit.png and sachin.png.

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  player1:string="Sachin Ramesh Tendulkar";
  player2:string="Virat Kohli";
  player3:string="Rohit Gurunath Sharma";
  player1photoPath:string="assets/images/sachin.png";
  player2photoPath:string="assets/images/virat.png";
  player3photoPath:string="assets/images/rohit.png";
}

app.component.html

<table border="5px solid black">
    <tr>
      <th>Player-Name</th>
      <th>Player-Image</th>
    </tr>
    <tr>
      <td>{{player1}}</td>
      <td> <img src='{{player1photoPath}}'/></td>
    </tr>
    <tr>
      <td>{{player2}}</td>
      <td> <img src='{{player2photoPath}}'/></td>
    </tr>
    <tr>
      <td>{{player3}}</td>
      <td> <img src='{{player2photoPath}}'/></td>
    </tr>
  </table>

We can also call class methods using interpolation as shown below.

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  fullName:string="Sachin Ramesh Tendulkar";
  age:number=46 ;
  gender:string="Male";
  photoPath:string="assets/images/sachin.png";

  getDetails():string{
    return this.fullName+ ' '+this.age+' '+this.gender;
  }
}

app.component.html

<img src='{{photoPath}}'/><br/>
<p>{{'Player-Details:'+getDetails()}}</p>

Output:-

v You can also use interpolation to be a ternary operator as shown in the example below

v Double curly braces contain template expressions which allow us to read primitive or object values from component properties.You can also use interpolation to be a ternary operator as shown in the example below.

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  heading = 'PLayer Details';
 //creating an object 
  player:any={
   fullName:"Sachin Ramesh Tendulkar",
   age:46,
   gender:"Male",
   country:"India"
 }
}

app.component.html

<h2>{{heading}}</h2>
<p>
  Name: {{player.gender === 'Male' ? 'Mr.' : 'Ms.'}}
  {{player.fullName }}
</p>
<p>Age: {{player.age}}</p>
<p>Contury: {{player.country}}</p>

Now we are using angular material table for designing following template.

§ So first add angular material in our project by following command

§ ng add @angular/material

§ Now we open Terminal in VSCode

§ To open Terminal in VSCode go to view menu and click on it and select Integrated Terminal

The ng add command will additionally perform the following configurations:

§ Add project dependencies to package.json.

§ Add the Roboto font to your index.html.

§ Add the Material Design icon font to your index.html.

§ Add a few global CSS styles to:

§ Remove margins from body

§ Set height: 100% on html and body

§ Set Roboto as the default application font

§ The ng add command will install Angular Material, the Component Dev Kit (CDK), Angular Animations and ask you the following questions to determine which features to include:

§ Choose a prebuilt theme name, or "custom" for a custom theme:

You can choose from prebuilt material design themes or set up an extensible custom theme

Set up browser animations for Angular Material:

§ Importing the BrowserAnimationsModule into your application enables Angular's animation system.

§ So When we add angular material in our project then in app module (app.module.ts)file BrowserAnimationsModule is imported and added in import’s array.

§ Open the app.module.ts file and check here.

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  //declaring players property as an array
  //players property container array of player object
  players=
  [
    {
      name:'Sachin Ramesh Tendulkar',
      photoPath:'assets/images/sachin.png'
    },
    {
      name:'Virat Kohli',
      photoPath:'assets/images/virat.png'
    },
    {
      name:'Rohit Gurunath Sharma',
      photoPath:'assets/images/rohit.png'
    }
  ];
  //list of columns
  displayedColumns:string[]=['name','photoPath'];
}

app.component.html

<table mat-table [dataSource]="players" class="mat-elevation-z8">

    <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->
  
    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> Name. </th>
      <td mat-cell *matCellDef="let player"> {{player.name}} </td>
    </ng-container>
  
    <!-- Image Column -->
    <ng-container matColumnDef="photoPath">
      <th mat-header-cell *matHeaderCellDef> Image </th>
      <td mat-cell *matCellDef="let player"> <img src="{{player.photoPath}}"/>  </td>
    </ng-container>
  
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

app.component.css

table
{
    width: 100%;
}

Angular Project Structure

Filed Under: Angular Tutorial on Wednesday, September 30, 2020

Project Structure of Angular Project

§ In this Session we will discuss all the files and folders in the Angular project

§ One of the easiest ways to create a working angular project, is by using the Angular CLI. The following Angular CLI command creates a working Angular Project out of the box

ng new AngularDemo

Ø ng is the Angular CLI

Ø new for creating a new application

Ø AngularDemo is the name of your angular application

§ A new folder with name AngularDemo is created.let's look the files in a project folder and how the execution flows in visual studio code we have the AngularDemo project folder there are lot of files so I am going to discuss only a few of them that are really important at this stage the first one is the package.json file.

package.json

§ This file contains the dependency and the dev dependencies which are nothing is the libraries and module that are required for angular application to work.

§ The package that it is listed here it installed when you run the command

ng new AngularDemo

§ All the packages get installed inside the node module folder.

§ we also have some of the scripts that can be executed ng serve command then this is one of them which runs are application you can also execute npm start which will internally call ng serve command.

node_modules folders

§ node_modules folder contains all the packages specified in package.json file .so whatever packages are specified in this file are installed into this folder when we run npm install command.

src folder

§ src folder contains all our angular project source code. Components, templates, pipes, services, images, styles etc. that our angular application needs are present in this folder.

§ In the source folder we have the main .ts file which is entry point of angular application we also have the app folder which contains the file app.module.ts which is the root module of a application and also app.component.ts which is the root component of an application when we run the command ng serve application execution comes to the main.ts file over here with bootstrap kick start the app on your in app module.in the app.module.ts file you can see that we can in-turn on again Quick start the app component .

§ This app component has two things html template and the class to control the view logic .so here app.component.ts file which contains the class that contain the logic for the data for the view.

§ In the class we have a property title is equal to a 'demo' and in HTML we have welcome to title but one time this title gets replaced by this property and then we also have some other HTML elements that get endered in the browser so we have welcome to app.

Assets

§ The assets folder contains the assets of your application like images and anything else to be copied when you build your application.

index.html

§ The main HTML page that is served when someone visits your site.

styles.css

§ This file contains the global styles of our application. Styles that are local and specific to a component are often defined with in the component itself for easier maintenance.

§ /* You can add global styles to this file, and also import other style files */

CSS Pseudo Classes

Filed Under: CSS Tutorial

CSS Pseudo-Classes

§ In this tutorial we are trying to understand CSS pseudo class selector and also we will learn how we can use them in our HTML pages.

§ I am going to discuss pseudo class selector with respect to navigation that is with respect to hyperlinks.

§ CSS pseudo-classes are used to add special effects to some selectors

A simple syntax of pseudo-classes is as follows –

selector: pseudo-class 
{
property: value
}

The :link pseudo-class

§ Use this class to add special style to an unvisited link

Selector: link  
{
   Declaration list;
}

§ It selects any html element targeted by the selector, if its status is un-visited (or default)

Example:

a:link
{
 text-decoration : none;
}

§ It selects any anchor element, if its status is un-visited.

Let’s create an example here

<html>
    <head>
    </head>
    <body>
        <a href="contactus.html">Visit Contact US Page</a>
        <br/>
        <br/>
        <a href="aboutus.html">Visit About US Page</a>
    </body>
</html>

§ For example here you can see that as I told anchor elements if they are in unvisited state they are going to have by default blue color text and text decoration underline what if you want to remove this underline then we have to identify the anchor elements which are in unvisited state and apply the text decoration none.

<html>
    <head>
        <style>
            a:link{
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <a href="contactus.html">Visit Contact US Page</a>
        <br/>
        <br/>
        <a href="aboutus.html">Visit About US Page</a>
    </body>
</html>

§ Save the file and go to browser and refresh you can see that both of them are in unvisited state its reason text-decoration is set to none they don't have underline.

The :hover pseudo-class

§ Use this class to add special style to an element when you mouse over it.

selector : hover
{
 declaration list;
}

§ It selects any html element targeted by the selector, if its status is hovered (on mouse over)

a:hover
{
border: 5px solid red;
}

§ It selects any anchor element, if its status is hovered.

§ I am telling to the browser that when we move the mouse cursor over any anchor element state changes to the hover then apply the border : 5px solid red;

§ when we move the mouse cursor over any anchor element then state changes to the hover state.

<html>
    <head>
        <style>
            a:link{
                text-decoration: none;
            }
            a:hover{
                border : 5px solid red;
            }

        </style>
    </head>
    <body>
        <a href="contactus.html">Visit Contact US Page</a>
        <br/>
        <br/>
        <a href="aboutus.html">Visit About US Page</a>
    </body>
</html>

§ save the file and go to browser and refresh you can see now both links are in unvisited state when I move the mouse cursor you can see that now the first anchor state is changed to hover state so it has a border: 5px solid red; if I move the mouse cursor on the second hyperlink then you can see the second hyperlink is also has border: 5px solid red; when we go away you can see that the underlined is remove they are back to unvisited state. Now both are of them are in unvisited state and hover state.

§ hover pseudo class selector is very very useful pseudo class that you can use it on almost every HTML element that means on mouseover if you want to apply some styles on any HTML element you can use this pseudo class selectors.

The :visited pseudo-class

§ Use this class to add special style to a visited link.

selector : visited
{
 declaration list;
}

§ It selects any html element targeted by the selector, if its status is visited (on click and
page visit)

a:visited

{
color : green;
} 

§ It selects any anchor element, if its status is visited

<html>
    <head>
        <style>
            a:link{
                text-decoration: none;
            }
            a:hover{
                border : 5px solid red;
            }
            a:visited{
                color: green;
            }

        </style>
    </head>
    <body>
        <a href="contactus.html">Visit Contact US Page</a>
        <br/>
        <br/>
        <a href="aboutus.html">Visit About US Page</a>
    </body>
</html>

§ when I click on this Visit Contact US Page of course we know that we go to the contactus.html page let’s go contact us page open if I come back you can see that the first hyperlink text color is changed to Purple color by default visited hyperlinks are going to have a purple color what if you want the green color instead of purple color if you have visited hyperlink and their color should be green.

§ then we have to write this code file a:visited{color: green;}save file and go to browser and refresh you can see that the first hyperlink color is changed to green color that indicate that we have visited the contact us page we have not visited to about us page hence it is still having the blue color because it is in unvisited state if I click on it we are visited to about us page and once I come back it is also going to have the green color now both of them are in visited state.

Navigation pseudo classes | :target

Using the :target pseudo-class in selectors

§ The pseudo-class: target is used to style the target element of a URL containing a fragment identifier.

selector : target
{
 declaration list;
}

§ It selects any html element targeted by the selector, if its status is targeted (Only when element id or name appears as targeted fragment identifier in the page URI.).

§ Let me explain what is the targeted fragment identifier go to the browser.in the URL

here you can see it is showing /default.html#bottom

.

§ We have #bottom right what is the meaning of that #bottom is actually known as targeted fragment identifier.

§ When we click on the middle section then #middle you can see as middle that is actually known as fragment identifier.

§ When we click on the top section then #top you can see as top that is actually known as fragment identifier.

§ If you see the targeted fragment identifier with the name top then maybe we want to apply some border around the top section here around this paragraph if I click on the middle section I want something to be highlighted that the middle section is now a targeted fragment identifier if I click on bottom section I want the border around it so that I can tell to the user that how the bottom section is the targeted fragment identifier how do we do that.

Example:-

<html>
    <head>
        <style>
            p:target{
                border: 2px solid greenyellow;
            }

        </style>
    </head>
    <body>
        <p id="top">Top Section</p>
        <a href="#middle">Middle Section</a><br/><br/>
        <a href="#bottom">Bottom Section</a><br/><br/>
        
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <p id="middle">Middle Section</p>
        <a href="#top">Top Section</a><br/><br/>
        <a href="#bottom">Bottom Section</a><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <p id="bottom">Bottm Section</p>
        <a href="#top">Top Section</a><br/><br/>
        <a href="#middle">Middle Section</a><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
    </body>
</html>

gravity4Tech

Featured Posts

Data Binding in Angular

Angular Project Structure

CSS Pseudo Classes

The :link pseudo-class

The :hover pseudo-class

Popular Posts

Categories

Contact Form

www.CodeNirvana.in

Blog Archive

About

Site Links

About Me

Popular Posts

Translate

Total Pageviews