Contents tagged with AngularJS 2

  • TypeScript class creation

    Hello everybody,

    today I want to document some demos for class declaration in Angular 2. 

    So, let's say you have following class declared:

    Snippet

    import { Component, Injectable } from '@angular/core'

    import { Http, Response } from '@angular/http'

    @Component({

    })

    export class Config {

        public apiKey: string = 'xxxxxyy117c24d8b9085187163f5d241';

        public url: string = 'https://public-api.blablacar.com/api/v2/trips?key=';

        constructor(private http: Http) {

        }

        getReqUrl(): string{

            return this.url + this.apiKey;

        }

    }

    Then the way to create it is the following:

    Snippet

    findTrips()

    {

        let conf = new Config();

        let url: string  … more

  • Angular 2 property binding

    Hello everybody,

    today I want to write few words about binding in AngularJS 2.

    There are two ways of making one way binding:

    element property binded to template expression

    property interpolation

    I've described it with following picture:

    Two-way Binding

    <input [(ngModel)]='property'>

    And property is decalred in Component class like this:

    export class ClassComponent {

           property: string = "Property value";

    } more

  • Observables in AngularJS 2

    Hello everybody,

    today I want to write a few words about totally new feature in AngularJS 2 which is entitled Observables. Observables to some degree feet to promises, but still have some differences. They are mentioned in following table:

    Promise

    Observable

    Single feature value

    Emits multiple values over time

    Not lazy

    Lazy

    Not cancelable

    Cancelable

    supports map, filter, reduc and similar operators

    more

  • What is service in AngularJS 2

    Hello everybody,

    today I want to write few words about AngularJS 2 services, or if to be more specific what is Service in angular at all? If to speak very very shortly: Service - it's a class with focused purpose independent from any particular component. It can be caching purpose, or logging purpose, or sending http requests purpose. 

    Lets say you need to build a service in AngularJS 2. You'll need to go through the following steps:

    Create class for service

    Define metadata with decorator

    Import what is needed for service

    import { Injectable } from '@angular/core'

    @Injectable() //needed if we have injected dependency or for consistency

    export class StudentsService{

            … more

  • Building a custom pipe in AngularJS 2

    Hello everybody,

    today I want to write few words about custom pipes in ... AngularJS 2. The first time when I've heard about custom pipes happened to be when I've learned powershell scripting. And recently I've discovered that there are some built in custom pipes in AngularJS 2 and we can make our own custom pipes. 

    What is needed for implementing custom pipes? Nothing special. Just import from AngularJS 2 PipeTransform and implement in it method transform. And one more is pipe decorator ( in my example something that starts from @Pipe and ends with first }) ). And what else? Of course import statements.

    It can look like this:

    import {Pipe, PipeTransform} from '@angular/core'

    @Pipe( … more

  • Angular 2 data binding and pipes

    Hello everybody,

    today  I want to make short note about types of Data Binding in AngularJS 2.

    here they are:

    Interpolation. It looks like this in code: {{firstName}}

    Property binding. Sample in code: <img [src]='person.photo'>

    Event binding. Html code pattern: <button (click)='showMessage()'... />

    Two-way binding: <input [(ngModel)]='someProperty' />

    Important think to remember about usage of ngModel is the following:

    in your imports add importing of FormsModule.

    For example like this:

    @NgModule({

           imports: [

              BrowserModule,

              FormsModule]

           declarations: [

              AppComponent,

    .......

           ]

       })

    export class AppModule {

    }

    If … more