Blog

Here I document some issues for searching of which I spent more then 15 minutes

  • 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

  • Ionic2 running apps

    Hello everybody,

    today I want to document few usefull commands which are usefull in ionic 2.

    Add platform:

    If you need your app to be able to execute on some platform you can use following command:

    ionic platform add xxx

    Where xxx stands for name of platform. It can have following values: windows, android, ios

    Run app

    If you want to run app in emulator, use the following command:

    ionic serve

    this command will execute your app in default browser.

    ionic run android 

    this command will deploy app on your android device and execute it there

    Add page

    ionic generate page specialPage

    this command will generate for you page specialPage with html, scss and ts file. For example when I … 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

  • XAML simplification of usage INotifyPropertyChanged

    Hello,

    I want to share some code, wich can simplify usage of INotifyPropertyChanged in XAML.

    Take a loot at following fragments:

    Snippet

    namespace NotifyPropertyChanged

    {

        public class BindableBase : INotifyPropertyChanged 

        {

            public event PropertyChangedEventHandler PropertyChanged;

            public void RaisePropertyChanged(string propertyName)

            {

                if(PropertyChanged != null)

                {

                    PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));

                }

            }

        }

    }

    Class BindableBase now can become as base class for those objects, which need to notify UI about changes in source code. Consider … more

  • Binding modes in XAML

    Hello everybody,

    today I want to write few words about binding in XAML.

    So there are four ways of binding in XAML.

    One way

    Two way

    One way to source

    One time

    If to speak about them more, then here it goes additional definitions:

    OneWay : source property updates target property

    TwoWay: source or target updates the other

    OneWayToSource: source is updated when target is updated

    OneTime: executed only once for initialization of target property

    What is important to notice for notification of UI, there is a need for implementing INotifyPropertyChanged interface. Without it changes in source properties will not become propogated to target.

    more

  • Basic elements in XAML

    Hello everybody,

    today I want to write few words about basic elements in XAML.

    DependencyObject

    This class is next in inheritance level in XAML after object. DependencyObject gives needed properties for representing something that participates in dependency property system. Mostly needed for data binding. It is basic for UIElement, Geometry, FameworkTemplates, Tile, ResourceDictionary.

    UIElement

    This is base class for all objects that have visual representation. It supports basic manipulation, appereance, layout. Also it has code for responses for user input, routed events, some aspects of animation system.

    FrameworkElement

    This class takes part in layout and obliged to have … 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

General information

Greetings to everybody stopping at my blog. Purpose of this web site is to be google of my brain. Everything I found useful, or of possible beneficial for usage in future I've save here at this blog

Contact information

If you want to contact me more on any subject printed at this web stie, you can email me: zaletskiy(at)gmail.com

Job information

If to speak in general, I'm developer. For now I work as team lead in company GlobalLogic.