Web Development using Angular 2/4 Tutorials and Examples

If you have created an Angular 2/4 project using Angular CLI now if you want to add new component/module you need need to perform the following changes: For demo we are adding a home module to newly created Angular 2 CLI project. Step 1: Add new folder inside the app called 'home'. Step 2: Add home.component.ts | home.component.html | home.component.css | home.component.spec.ts | index.ts files Step 3: Also add app.routing.ts inside the app folder. Step 4: Now add new route to the app.routing.ts file: import { Routes, RouterModule } from '@angular/router'; import { HomeComponent } from './home/index'; const appRoutes: Routes = [ {path: '', component: HomeComponent}, {path:'**', redirectTo: ''} //otherwise ]; export const routing = RouterModule.forRoot(appRoutes); Step 5: Modify the app.module.ts  to add new component/module: import { routing }        from './app.routing'; import { HomeComponent } from './hom...

Angular 2/4 Application Internationalisation/Localisation (i18n) Example using Angular CLI Step-1: Angular CLI Installation npm install -g @angular/cli Generating an Angular project via a development server ng new angular2-ngx-translate-demo-angular-cli Serving an Angular project via a development server ng serve Navigate to http://localhost:4200/ Create language JSON with the json values to convert to the values. Let's say we are suing English(en) and French(fr) languages for Angular 2 localization. angular2-ngx-translate-demo-angular-cli/src/i18n/en.json angular2-ngx-translate-demo-angular-cli/src/i18n/fr.json The sample content for any language file can be as per below structure: { "header": { "title": "Welcome to Angular 4", "head": "Here are some links to help you start", "list":"Tour of Heroes", } } and now convert the languages to the next JSON as fr.json: { "hea...

Angular 2 and Introduction Angular 2 is an open source JavaScript/TypeScript framework to build web applications in HTML and JavaScript/TypeScript and has been conceived as a mobile first approach. Features Angular2 is faster and easier than AngularJS. It supports latest version of browsers and also supports old browsers. It is a cross platform framework. Angular 2 is mainly focused on mobile applications. Code structure is very simplified than the previous version of Angular. dvantages If an application is a heavy load, then Angular2 keeps it fully UI responsive. It uses server side rendering for fast views on mobile. It works well with ECMAScript and other languages that compile to JavaScript. It uses dependency injection to maintain apps without writing too long code. Everything will be the component based approach. The TypeScript is a super set of JavaScript which is migrated to TypeScript and code written in TypeScript makes less prone to run time erros. S...

NGX-Translate NGX-Translate is the i18n library for Angular 2 or 4 and used for template translation in various languages and switching between the languages. It provides a service, a directive and a pipe to handle any dynamic/static template. NGX-Translate is based on modular approach and customizable. Implementation with ngx-translate The main module of the library is named core . A good practice to add a loader to load translations into application. NGX-Translate Implementaion is available in the following modules: core : The internationalization (i18n) library for Angular 2/4. http-loader : A loader for ngx-translate that loads translations with http calls. ngx-translate-website : NGX-Translate, the internationalization (i18n) library for Angular 2/4 NGX-Translate Loaders Http Loader : Loads JSON translation files with http. Angular Universal Loader : Loads JSON translation files with fs instead of http. Po Loader : Loads .po files with http. NGX-Translate Imp...

There are four phases in the i18n template translation process: 1. Marking the template element inside the component for translation.  e.g. <span i18n>Hello i18n</span>        <img [src]="Logo" i18n-title title="Angular4 Logo"/> 2. Angular i18n tool will extract the marked elements into standard translation source file. 3. Edit the file and insert target language.  <trans-unit id="244bcd334kdda82506d258137adf23412c" datatype="html">         <source>Email</source>         <target>Email</target> </trans-unit> 4. The compiler imports the translation files, replaces the original messages with the target you set in step 3 and generates fresh version of the app. <hr/> For more details visit the Angular.io website documentation.