Talk About Code

Why should your Angular code download a file? Of course your webserver can deliver files and you can just add a simple link to your website but what if the file is delivered by a webservice and the webservice requests authentication (i.e. OAuth) to protect the file from unauthorized access? In this case you might have the requirement to download the file in your code and then tell the browser to save it to the hard disk. How to do that?   First of all you need to add filesaver.js to your project.  npm install file-saver --save ..and add the typings npm install @types/file-saver --save-dev More information about filesaver you can find on the filesaver github pages . To download the file via http you need to implement a service. The following imports are required: import  {  Injectable  }  from   '@angular/core' ; import  {  Http ,  Response ,  RequestOptions ,  ResponseContentType  }  from   ...

You want that your users can leave messages in your Angular Application. In this Article I explain how you can implement this with Angular 4 and Firebase. First we have to import the Moduls for Firebase in our app.module.ts and our component. app.module.ts import  {  AngularFireModule  }  from   'angularfire2' ; import  {  AngularFireDatabaseModule ,  AngularFireDatabase ,  FirebaseListObservable  }  from   'angularfire2/database' ; @ NgModule ({    declarations:  [      AppComponent   ],    imports:  [      BrowserModule ,      FormsModule ,      HttpModule ,      AngularFireModule . initializeApp ( firebaseConfig ),      AngularFireDatabaseModule , We also have to configure the AngularFireModule. export   const   fireba...

If you run this well known Angular CLI command to create a new angular project, your selector prefix is set to selector:   'app-root' , If you want to have another name instead of app, like f.e. the company name, you can go to the Angular CLI JSON and changing the prefix from app to companyname. "prefix" :  "app" , "prefix" :  "companyname" , So if you create a new component with CLI, it will get companyname instead of app at the selector. But this has no effect on the existing components. Of course you can change the name manually. But the best way is, to set the prefix right from the start. The CLI comand for this is simple but effiktive. That's all. Have fun at your Angular projects

There is a way to let users use there social logins to get access to Firebase. But how do you implement this login to your Angular 4 project. In this article I will tell you how to set up your Firebase database and how do you implement social login to your angular project. Set up Firebase First we have to get our database ready. In your Firebase Console you will find Authentication in the left navigation bar. At the tab Sign-In Method you can enable different sign in methods. In our example we will enable Google and Facebook, as it's the most commend social login methods these days. The Google Login will be configured automatically. When you enable Facebook Login you need an App ID and an App Secret. You will get these when you register yourself as a developer at Facebook. You can read how you can do that at the Facebook Site . I will not explain you that in detail because it's very easy. If we done, it's time to set up our Angular4 code. Install Ang...

Requirement:  Use multiple Root-Components in the same Application  This Root-Components use the same Implementations and Services Display the Root-Components on the same Single-Page Solution: App-Module preparation: import { BrowserModule, DOCUMENT } from '@angular/platform-browser'; import { NgModule, Inject, Component } from '@angular/core'; export class AppModule { private browser_document; ngDoBootstrap(appRef){ if(this.browser_document.getElementsByTagName('app-root1').length > 0){appRef.bootstrap(AppComponent1);} if(this.browser_document.getElementsByTagName('app-root2').length > 0){appRef.bootstrap(AppComponent2);} } constructor(@Inject(DOCUMENT) private document: any){ this.browser_document = document; } } Service preparation: Angular 2 has two options to provide a service. 1. Single instance For a multiple implementation of more Root-Components we need the second opt...

Writing interfaces can be annoying. You can save a lot of time when you have to define Typescript interfaces for data that you are loading from a webservice.  Instead of typing all the interfaces yourself you can just use a nice service in the web: json2ts Just paste in your json code and it generates the corresponding interfaces in Typescripts. Example JSON: [   {      "city": "Berlin",     "country": "Germany",     "currencies": [{"code":"EUR"}]   },   {      "city": "Paris",     "country": "France",     "currencies": [{"code":"EUR"}]   } ] Generated code: declare module namespace {     export interface Currency {         code: string;     }     export interface RootObject {         city: string;         country: string;         currencies: Currency...

On May 04 Progress has released Kendo UI for Angular in version 1.0.0. Kendo UI is one of the best UI frameworks I know. I have done several projects based on Kendo UI for JQuery and enjoyed working with that. Mid of January 2017 they published a first version and I immediately started developing with that.  Impatiently waiting for more components!

In my previous article  Nested Component - Passing Data to a Child Component , I explained how to pass data from a parent component to a child component.  In this article I will describe how you do the other way, passing data from a child to a parent component. As you know, there is a decorator called @Input for passing data to the child, and of course there is another decorator to passing the data to the parent. This decorator is called @Output. Very obvious. So we have to import this decorator to your parent component import  {  Output  }  from   '@angular/core' ; Now we can use this decorator. The property type of the decorator must be an event. The data to pass becomes the event payload. So we have to import the EventEmitter, too, because in Angular an event is defined with an EventEmitter object. import  {  Output ,  EventEmitter  }  from   '@angular/core' ; Next step is to create a new instance of th...