Hello everyone.

As developers, we have to agree on one statement that, 40% of our development depends on searching answers in the internet. In this area, the most famous forum is StackOverflow. What ever stupid question we might have while we are writing code, the answer is available there.

So, in this article I tried to compile answers some of the most common questions of Angular.

Index

1. Angular — Promise vs Observable
2. Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’
3. What is the equivalent of ngShow and ngHide in Angular?
4. Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’
5. How to use *ngIf else in Angular?
6. What is difference between declarations, providers and import in NgModule
7. ngIf and ngFor on same element causing error
8. How to detect when an @Input() value changes in Angular?
9. How do you deploy Angular apps?
10. Difference between HTTP and HTTPClient in angular 4?

1. Angular — Promise vs Observable

Promise

A Promise handles a single event when an async operation completes or fails.

Note: There are Promise libraries out there that support cancellation, but ES6 Promise doesn't so far.

Observable

An Observable is like a Stream (in many languages) and allows to pass zero or more events where the callback is called for each event.

Often Observable is preferred over Promise because it provides the features of Promise and more. With Observable it doesn't matter if you want to handle 0, 1, or multiple events. You can utilize the same API in each case.

Observable also has the advantage over Promise to be cancelable. If the result of an HTTP request to a server or some other expensive async operation isn't needed anymore, the Subscription of an Observable allows to cancel the subscription, while a Promise will eventually call the success or failed callback even when you don't need the notification or the result it provides anymore.

Observable provides operators like map, forEach, reduce, ... similar to an array

There are also powerful operators like retry(), or replay(), ... that are often quite handy.

Source

2. Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’

In the app.module.ts, I just added :

import { FormsModule } from '@angular/forms';

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})

Source

3. What is the equivalent of ngShow and ngHide in Angular?

Just bind to the hidden property

[hidden]="!myVar"

See also

issues

hidden has some issues though because it can conflict with CSS for the display property.

:host {display: block;}

set. (This might behave differently in other browsers — I tested with Chrome 50)

workaround

You can fix it by adding

[hidden] { display: none !important;}

To a global style in index.html.

another pitfall

hidden="false"
hidden="{{false}}"
hidden="{{isHidden}}" // isHidden = false;

are the same as

hidden="true"

and will not show the element.

hidden="false" will assign the string "false" which is considered truthy. Only the value false or removing the attribute will actually make the element visible.

Using {{}} also converts the expression to a string and won't work as expected.

Only binding with [] will work as expected because this false is assigned as false instead of "false".

*ngIf vs [hidden]

*ngIf effectively removes its content from the DOM while [hidden] modifies the display property and only instructs the browser to not show the content but the DOM still contains it.

Source

4. Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’

RC5 FIX

You need to import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms' in your controller and add it to directives in @Component. That will fix the problem.

After you fix that, you will probably get another error because you didn’t add formControlName="name" to your input in form.

RC6/RC7/Final release FIX

To fix this error, you just need to import ReactiveFormsModule from @angular/forms in your module. Here's the example of a basic module with ReactiveFormsModule import:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent }  from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})

export class AppModule { }

To explain further, formGroup is a selector for directive named FormGroupDirective that is a part of ReactiveFormsModule, hence the need to import it. It is used to bind an existing FormGroup to a DOM element.

Source

5. How to use *ngIf else in Angular?

using else :

<div *ngIf="isValid;else other_content">
    content here ...
</div>

<ng-template #other_content>other content here...</ng-template>

you can also use then else :

<div *ngIf="isValid;then content else other_content">here is ignored</div>

<ng-template #content>content here...</ng-template>
<ng-template #other_content>other content here...</ng-template>
or then alone :

<div *ngIf="isValid;then content"></div>

<ng-template #content>content here...</ng-template>

Source

6. What is difference between declarations, providers and import in NgModule

• imports makes the exported declarations of other modules available in the current module.

• declarations are to make directives (including components and pipes) from the current module available to other directives in the current module. Selectors of directives, components or pipes are only matched against the HTML if they are declared or imported.

• providers are to make services and values known to DI. They are added to the root scope and they are injected to other services or directives that have them as dependency.

Source

7. ngIf and ngFor on same element causing error

Angular2 doesn’t support more than one structural directive on the same element. As a workaround use the <ng-container> element that allows you to use separate elements for each structural directive, but it is not stamped to the DOM.

<ng-container *ngIf="show">
  <div *ngFor="let thing of stuff">
    {{log(thing)}}
    <span>{{thing.name}}</span>
  </div>
</ng-container>

( before Angular4) allows to do the same but with a different syntax which is confusing and no longer recommended

<ng-template [ngIf]="show">
  <div *ngFor="let thing of stuff">
    {{log(thing)}}
    <span>{{thing.name}}</span>
  </div>
</ng-template>

Source

1. How to detect when an @Input() value changes in Angular?

You can use the 'ngOnChanges()' lifecycle method.

Source

9. How do you deploy Angular apps?

You are actually here touching two questions in one. First one is how to host your application. And as @toskv mentioned its really too broad question to be answered and depends on numerous different things. Second one is more specific — how do you prepare the deployment version of the application. You have several options here:

1. Deploy as it is. Just that — no minification, concatenation, name mangling etc. Transpile all your ts project, copy all your resulting js/css/… sources + dependencies to the hosting server and your are good to go. Deploy using special bundling tools. Like webpack or systemjs builder. They come with all possibilities that are lacking in

2. You can pack all your app code into just couple of js/css/… files that you reference in your html. Systemjs buider even allows you to get rid of need to include systemjs as part of your deployment package. Yes you will most likely need to deploy systemjs and bunch of other external libraries as part of your package. And yes you will be able to bundle them into just couple of js files you reference from your html page. You do not have to reference all your compiled js files from the page though — systemjs as a module loader will take care of that.

I know it sounds muddy — to help get you started with the #2 here are two really good sample applications:

SystemJS builder: angular2 seed

WebPack: angular2 webpack starter

Look how they do it — and hopefully this will help you to find your way of bundling apps you make.

Source

10. Difference between HTTP and HTTPClient in angular 4?

Use the HttpClient class from HttpClientModule if you're using Angular 4.3.x and above:

import { HttpClientModule } from '@angular/common/http';

@NgModule({
 imports: [
   BrowserModule,
   HttpClientModule
 ],
 ...

 class MyService() {
    constructor(http: HttpClient) {...}

It’s an upgraded version of http from @angular/http module with the following improvements:

• Interceptors allow middleware logic to be inserted into the pipeline
• Immutable request/response objects
• Progress events for both request upload and response download

Source

---

Hope you learned something by this article. You can find the original article here