1. Home
  2. Angular code examples

Angular code examples

Examples

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested component test</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

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

@Component({
  selector: 'app-root',
 template:`<div style="text-align:center">
            <h1>
              Welcome to {{title}}!
            </h1>
            <p>
              <todaytime></todaytime>
            </p>
          </div>`,
})
export class AppComponent {
  title = 'app';
}



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

@Component({
    selector:"todaytime",
    template:`<h2>Today is {{today}}</h2>`
})
export class TodayTimeComponent{
    today=new Date();
}



import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import {TodayTimeComponent} from './TodayTimeComponent';

@NgModule({
  declarations: [
    AppComponent,TodayTimeComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

passing values among components

 

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

@Component({
  selector: 'app-root',
  template:`<div style="text-align:center">
              <h1>
                Welcome to {{title}}!
              </h1>
              <p>
                <todaytime></todaytime>
              </p>
            </div>
            <div style="text-align:center">
              <message value="Example of passing data among components"></message>
            </div>
            `,
  })
export class AppComponent {
  title = 'app';
}




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

@Component({
    selector:"message",
    template:`<h3>{{message}}</h3>`
})
export class MessageComponent{
    @Input('value') message:String;
}

Click event binding

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

@Component({
    selector:"message",
    template:`
    <h3 (click)="messageClicked()">{{message}}</h3>
    <span (click)="message='Message Changed'">Click Here to see Time</span>
    `
})
export class MessageComponent{
    @Input('value') message:String;
    messageClicked(){
        alert("Message Clicked");
    };
}

Pipes

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

@Component({
    selector:"todaytime",
    template:`<h2>Today is {{today | date:'yyyy-MM-dd'}}</h2>`
})
export class TodayTimeComponent{
    today=new Date();
}

Data binding

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

@Component({
    selector:"DataBindingDemoComponent",
    template:`
    <p>Interpolation technique : <a href="{{url}}">Link</a></p>
    <p>Property Binding : <a [href]="url">Link</a></p>
    <p>Attribute Binding : Input Field : <input type="text" [value]="name"  [attr.disabled]="isDisabled"/></p>
    <p Class Biding [class]="myCustomClass" class="boldstyle">Class binding</p>
    <p Class Biding [class.red]="isTrue">Class binding</p>
    <p [style.backgroundColor]="bgcolor">This is style binding demo</p>
    <p>Event Binding : <button (click)="myFunction()">button</button></p>
    <p>
    <input type='text' placeholder= "Enter stock symbol" [(ngModel)] = "lastStockSymbol"> 
    <br>The value of lastStockSymbol is {{lastStockSymbol}}
    </p>
    `,
    styles:[`
        .blue{
            color:blue;
        }
        .red{
            color:red;
        }
        .boldstyle{
            font-weight:bold;
        }
    
    `]
})
export class DataBindingDemoComponent{
    url:String="http://google.com";
    name:String="Hemraj";
    isDisabled=true;

    myCustomClass="blue";
    isTrue=true;

    bgcolor="#cccccc";
    myFunction(){
        alert("clicked");
    }

    lastStockSymbol="Default Messate";
}

//For highlighted one, you have to import one more module in you app module file
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';

import { AppComponent } from './app.component';
import {TodayTimeComponent} from './TodayTimeComponent';
import {MessageComponent} from './MessageComponent';
import{DataBindingDemoComponent} from './DataBindingDemoComponent';

@NgModule({
  declarations: [
    AppComponent,TodayTimeComponent,MessageComponent,DataBindingDemoComponent
  ],
  imports: [
    BrowserModule,FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

Tags
Angular