Tips and Tricks in a world of Mix

Archive for the ‘Angular4’ Category

Init type instance in Typescript 2.1 automatically – loved it !

So simple and elegant :

Found in this post

 

Typescript 2.1 introduces Mapped Types and provides Partial<T>, which allows you to do this….

class Person {
    public name: string = "default"
    public address: string = "default"
    public age: number = 0;

    public constructor(init?:Partial<Person>) {
        Object.assign(this, init);
    }
}

let persons = [
    new Person(),
    new Person({}),
    new Person({name:"John"}),
    new Person({address:"Earth"}),    
    new Person({age:20, address:"Earth", name:"John"}),
];
 
Advertisements
Image

Ionic3 – Angular4 Super starter change language

download.jpg

 

So I’ve started with Super starter for ionic angular template.

 

The problem was it was only english also it had i18n globalization multi lingual plugin

So I’ve found this and perfected it just a bit.

 

In ..\WebstormProjects\ionic3-angular4\src\pages\tutorial\tutorial.html

Added buttons getting the param of the language wanted :

<ion-header no-shadow>
  <ion-navbar>
    <ion-buttons end >
      <button ion-button (click)="translateTo('he')" color="primary">He</button>
    </ion-buttons>

    <ion-buttons end >
      <button ion-button (click)="translateTo('ru')" color="primary">Ru</button>
    </ion-buttons>

    <ion-buttons end >
      <button ion-button (click)="translateTo('he')" color="primary">He</button>
    </ion-buttons>


    <ion-buttons end *ngIf="showSkip">
      <button ion-button (click)="startApp()" color="primary">{{ 'TUTORIAL_SKIP_BUTTON' | translate}}</button>
    </ion-buttons>


  </ion-navbar>
</ion-header>

 

And in ..\WebstormProjects\ionic3-angular4\src\pages\tutorial\tutorial.ts

I’ve encapsulated the code of  initialization for reuse when the button is hit, so actually all I am doing is reinitializing the language and saying to translate provider want language to use using the parameter I’ve got from clicking the button.

constructor(public navCtrl: NavController, public menu: MenuController, public translate: TranslateService) {

  this.initTranslate();
}

initTranslate(){
  this.translate.get(["TUTORIAL_SLIDE1_TITLE",
    "TUTORIAL_SLIDE1_DESCRIPTION",
    "TUTORIAL_SLIDE2_TITLE",
    "TUTORIAL_SLIDE2_DESCRIPTION",
    "TUTORIAL_SLIDE3_TITLE",
    "TUTORIAL_SLIDE3_DESCRIPTION",
  ]).subscribe(
    (values) => {
      console.log('Loaded values', values);
      this.slides = [
        {
          title: values.TUTORIAL_SLIDE1_TITLE,
          description: values.TUTORIAL_SLIDE1_DESCRIPTION,
          image: 'assets/img/ica-slidebox-img-1.png',
        },
        {
          title: values.TUTORIAL_SLIDE2_TITLE,
          description: values.TUTORIAL_SLIDE2_DESCRIPTION,
          image: 'assets/img/ica-slidebox-img-2.png',
        },
        {
          title: values.TUTORIAL_SLIDE3_TITLE,
          description: values.TUTORIAL_SLIDE3_DESCRIPTION,
          image: 'assets/img/ica-slidebox-img-3.png',
        }
      ];
    });
}

translateTo(lang){
  this.translate.use(lang);
  this.initTranslate();
}

 

That easy. Now you are ready for the global world. 🙂

 

 

 

 

 

 


			

Install Angular 4 – quickstart

angular4So, all of us heard about Angular 4, but where do we start.
IN THIS POST IT’S A SHORT LIST OF ACTIONS TO START WORKING WITH ANGULAR 4.

npm install -g @angular/cli

 

ng new projectname
cd projectname
ng -v
Copy paste BY YOUR OPERATING SYSTEM to cmd and run.

We have two main ways to update. If you have an existing project, you should be able to run:

On Linux/Mac: npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@next --save On Windows: npm install @angular/common@next @angular/compiler@next @angular/compiler-cli@next @angular/core@next @angular/forms@next @angular/http@next @angular/platform-browser@next @angular/platform-browser-dynamic@next @angular/platform-server@next @angular/router@next @angular/animations@next --save

Then run whatever ng serve or npm startcommand you normally use, and everything should work.

Please ensure that you are using Typescript v2.1.6 or higher.

If you rely on Animations you’ll also need to install the animations package @angular/animationsand import the new BrowserAnimationsModulefrom @angular/platform-browser/animationsin your root NgModule. Without this, your code will compile and run, but animations won’t activate. Imports from @angular/core were deprecated, use imports from the new package import { trigger, state, style, transition, animate } from '@angular/animations';.
Update typescript
In cmd
npm install typescript@2.2.1 – – save
ng -v
ng serve
________________________
To work with quickstart
 npm install
ng -v  (uses angular 2)
Again paste the lines from the changelog
Then
npm start

Tag Cloud

%d bloggers like this: