Talk About Code

Sometimes the structure of Angular projects can become confusing. After adding tons of components and modules it might be difficult to keep track of what is what. Compodoc can help you out by generating a much better to read documentation for your project. It can give you a visual and easy to browse overview of all the code in your application and lots of useful features. How to install: Compodoc is available by npm. First install it globally: npm install -g @compodoc/compodoc Then install it in your project: npm install --save-dev @compodoc/compodoc In a next step you have to add a command to your package.json. In the 'scripts' area add the following line: "compodoc" :  "./node_modules/.bin/compodoc -p src/tsconfig.app.json" Hint: in the original documentation at the moment it refers to tsconfig.json which is wrong and would give you an error message. Finally generate the documentation and open it in the browser: npm run compodoc co

Not everything is available as a native Typescript library. Due to that sometimes you might need to use 3rd party libraries. After creating a new project with Angular CLI you will experience that VS Code does not know any libraries you have imported in the header tag and the compiler complains when you try to use this libraries. The reason is: You are missing the typings. The typings describe the functionality of the libary and make that available in your project through intellisense and for the compiler. But before you start creating your own typings do the following checks: 1. Does the vendor of the library provide the typings? If yes, install through npm 2. Are the typings available on definitely typed ? If yes, then take it from there. If this is not the case then you can do your own typings. If you want to do that properly, then you should write the complete set of typings for the library and upload to definitely typed to provide it for the community. OK, this might b

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   '@angular/http' ; import  {  Observable  }  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   firebaseConfig  = {    apiKey:   "" ,      authDomain:   "" ,      databaseURL:   "" ,      projectId:   "" ,      storageBucket:   "" ,      messagingSender

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