Yes. What you wrote works:

    &lt;div [ngClass]=&quot;varA === varB ? &#39;css-class-1&#39; : &#39;css-class-2&#39;&quot;&gt;

[Plunker][1]

The result of the expression on the the right-hand side has to evaluate to one of the following:

  * a string of space-delimited CSS class names (this is what your expression returns)
  * an Array of CSS class names
  * an Object, with CSS class names as keys, and booleans as values

Maybe you had some other error in your code?


  [1]: http://plnkr.co/edit/C6dNlDiynghdDFNZ1zSJ?p=preview

    &lt;div [ngClass]=&quot;{&#39;css-class-1&#39;:varA === varB, &#39;css-class-2&#39;: varA !== varB}&quot;&gt;

See also https://angular.io/api/common/NgClass

You can try the followings.....

For ternary operator use:

    [ngClass]=&quot;condition1==condition2?&#39;class-1&#39;:&#39;class-2&#39;&quot;
For multiple condition use:

    [ngClass]=&quot;{&#39;class-1&#39;:condition1==condition2, &#39;class-2&#39;: condition3==condition4}&quot;
    
thnks...

you can try this:

&lt;div [ngClass]=&quot;condition ? &#39;style_1&#39; :&#39;style_2&#39;&quot;&gt;

maybe this example, will make it clearer:

    &lt;div [ngClass]=&quot;salesVolume &lt;= 55_000 ? &#39;bg_green&#39; : &#39;bg_red&#39; &quot; &gt;

bg_green and bg_red are 2 class styles defined in your style.css file

you can try this:
```
&lt;div class=&quot;css-class-3 css-class-4&quot; [ngClass]=&quot;{&#39;css-class-1&#39;: varA === varB, &#39;css-class-2&#39;: !(varA === varB)}&quot;&gt;
```
this worked for me

I want a button to be disabled until a checkbox has been checked using a FormBuilder for Angular. I don&#39;t want to explicitly check the value of the checkbox and would prefer to use a validator so that I can simply check `form.valid`.

In both validation cases below the checkbox is 

&lt;!-- language: lang-typescript --&gt;

    interface ValidationResult {
      [key:string]:boolean;
    }
    
    export class CheckboxValidator {
      static checked(control:Control) {
        return { &quot;checked&quot;: control.value };
      }
    }
    
    @Component({
      selector: &#39;my-form&#39;,
      directives: [FORM_DIRECTIVES],
      template: `  &lt;form [ngFormModel]=&quot;form&quot; (ngSubmit)=&quot;onSubmit(form.value)&quot;&gt;
        &lt;input type=&quot;checkbox&quot; id=&quot;cb&quot; ngControl=&quot;cb&quot;&gt;
        &lt;button type=&quot;submit&quot; [disabled]=&quot;!form.valid&quot;&gt;
        &lt;/form&gt;`
    })
    
    export class SomeForm {
      regForm: ControlGroup;
    
      constructor(fb: FormBuilder) {
        this.form = fb.group({
          cb: [ CheckboxValidator.checked ]
          //cb: [ false, Validators.required ] &lt;-- I have also tried this
        });
      }
    
      onSubmit(value: any) {
        console.log(&#39;Submitted: &#39;, this.form);
      }
    }


Requiring a checkbox to be checked

We have an array of objects as such

    var myArr = [ {name: &quot;john&quot;, age: 23},
                  {name: &quot;john&quot;, age: 43},
                  {name: &quot;jim&quot;, age: 101},
                  {name: &quot;bob&quot;, age: 67} ];

how do I get the list of objects from myArr where name is john with lodash?


Filtering array of objects with lodash based on property value

In Angular 1, the code below works well.

    &lt;div ng-class=&quot;$varA === $varB ? &#39;css-class-1&#39; : &#39;css-class-2&#39;&quot;&gt;

But when I try to do similar thing in Angular 2. It does not work.

I already added `directives: [NgClass]`

    &lt;div [ngClass]=&quot;varA === varB ? &#39;css-class-1&#39; : &#39;css-class-2&#39;&quot;&gt;

How should I write in Angular 2, thanks!

**EDIT: It was my mistake, I accidentally added `{` `}` to the whole `varA === varB ? &#39;css-class-1&#39; : &#39;css-class-2&#39;`. So ngClass still can use ternary operator in Angular 2.**

Can ngClass use ternary operator in Angular 2?

In Angular 1, the code below works well.
<pre><code class="hljs language-bash">&#x3C;div ng-class="$varA === $varB ? 'css-class-1' : 'css-class-2'">
</code></pre>
But when I try to do similar thing in Angular 2. It does not work.
I already added <code>directives: [NgClass]</code>
<pre><code class="hljs language-ini">&#x3C;div [ngClass]="varA === varB ? 'css-class-1' : 'css-class-2'">
</code></pre>
How should I write in Angular 2, thanks!
EDIT: It was my mistake, I accidentally added <code>{</code> <code>}</code> to the whole <code>varA === varB ? 'css-class-1' : 'css-class-2'</code>. So ngClass still can use ternary operator in Angular 2.

I have a set of single cell components within an `ng-for` loop.

I have everything in place but I cannot seem to figure out the proper

Currently I have 

    setTimeout(() =&gt; {
      scrollToBottom();
    });

But this doesn&#39;t work all the time as images asynchronously push the viewport down.

Whats the appropriate way to scroll to the bottom of a chat window in Angular 2?



Angular 2 Scroll to bottom (Chat style)

I have a property in a top level Component that is used data from a HTTP source like so (this is in a file called `app.ts`):

    import {UserData} from &#39;./services/user-data/UserData&#39;;

    Component({
        selector: &#39;app&#39;, // &lt;app&gt;&lt;/app&gt;
        providers: [...FORM_PROVIDERS],
        directives: [...ROUTER_DIRECTIVES],
        pipes: [],
        template: require(&#39;./app.html&#39;)
    })
    @RouteConfig([
        // stuff here
    ])
    
    export class App {
        // Please note that UserData is an Injectable Service I have written
        userStatus: UserStatus;
    
        constructor(private userData: UserData) {
            this.userStatus = new UserStatus();
        }
    
        ngOnInit() {
            this.userData.getUserStatus()
                .subscribe(
                (status) =&gt; {
                    this.userStatus = status; // I want to access this in my Child Components...
                },
                (err) =&gt; {console.log(err);},
                () =&gt; {console.log(&quot;User status complete&quot;);            }
            );
        }
    }

Now, I have another Component that is a direct child of the top level Component and within it I would like to access the parent&#39;s property &#39;`userStatus`&#39;, here is the child:

    Component({
        selector: &#39;profile&#39;,
        template: require(&#39;app/components/profile/profile.html&#39;),
        providers: [],
        directives: [],
        pipes: []
    })
    
    export class Profile implements OnInit {
        constructor() {
    
        }
    
        ngOnInit() {
        	// I want to have access with the parent App Component, &#39;userStatus&#39; propety here... I only want to read this property
        }
    }

Now in Angular 1.x this would be easy as I could reference `$parent` in my child controller or (**ANTI PATTERN ALERT!!!**) I could be so foolish to put this data in my `$rootScope`.

What would be the best way to access the parent in Angular 2?

Accessing a property in a parent Component

I&#39;m currently trying to teach myself Angular2 and TypeScript after happily working with AngularJS 1.* for the last 4 years! I have to admit I am hating it but I am sure my eureka moment is just around the corner... anyway, I have written a service in my dummy app that will fetch http data from a phoney backend I wrote that serves JSON.

    import {Injectable} from &#39;angular2/core&#39;;
    import {Http, Headers, Response} from &#39;angular2/http&#39;;
    import {Observable} from &#39;rxjs&#39;;
    
    @Injectable()
    export class UserData {
    
        constructor(public http: Http) {
        }
    
        getUserStatus(): any {
            var headers = new Headers();
            headers.append(&#39;Content-Type&#39;, &#39;application/json&#39;);
            return this.http.get(&#39;/restservice/userstatus&#39;, {headers: headers})
                .map((data: any) =&gt; data.json())
                .catch(this.handleError);
        }
    
        getUserInfo(): any {
            var headers = new Headers();
            headers.append(&#39;Content-Type&#39;, &#39;application/json&#39;);
            return this.http.get(&#39;/restservice/profile/info&#39;, {headers: headers})
                .map((data: any) =&gt; data.json())
                .catch(this.handleError);
        }
    
        getUserPhotos(myId): any {
            var headers = new Headers();
            headers.append(&#39;Content-Type&#39;, &#39;application/json&#39;);
            return this.http.get(`restservice/profile/pictures/overview/${ myId }`, {headers: headers})
                .map((data: any) =&gt; data.json())
                .catch(this.handleError);
        }
    
        private handleError(error: Response) {
            // just logging to the console for now...
            console.error(error);
            return Observable.throw(error.json().error || &#39;Server error&#39;);
        }   
    }

Now in a Component I wish to run (or chain) both `getUserInfo()` and `getUserPhotos(myId)` methods. In AngularJS this was easy as in my controller I would do something like this to avoid the &quot;Pyramid of doom&quot;...

    // Good old AngularJS 1.*
    UserData.getUserInfo().then(function(resp) {
    	return UserData.getUserPhotos(resp.UserId);
    }).then(function (resp) {
    	// do more stuff...
    }); 

Now I have tried doing something similar in my component (replacing `.then` for `.subscribe`) however my error console going crazy! 

    @Component({
        selector: &#39;profile&#39;,
        template: require(&#39;app/components/profile/profile.html&#39;),
        providers: [],
        directives: [],
        pipes: []
    })
    export class Profile implements OnInit {
    
        userPhotos: any;
        userInfo: any;
    
        // UserData is my service
        constructor(private userData: UserData) {
        }
    
        ngOnInit() {
    
            // I need to pass my own ID here...
            this.userData.getUserPhotos(&#39;123456&#39;) // ToDo: Get this from parent or UserData Service
                .subscribe(
                (data) =&gt; {
                    this.userPhotos = data;
                }
            ).getUserInfo().subscribe(
                (data) =&gt; {
                    this.userInfo = data;
                });
        }
    
    }

I&#39;m obviously doing something wrong... how would I best with Observables and RxJS? Sorry if I am asking stupid questions... but thanks for the help in advance! I have also noticed the repeated code in my functions when declaring my http headers...


Chaining RxJS Observables from http data in Angular2 with TypeScript

I&#39;m making a website using `Angular2` and I&#39;m having what i suppose is an issue. On the first load of my angular page, `SystemJS` is making more than 500 hundred requests to retrieve every `Angular2` file in `angular2/src` directory. In total, the first load downloads more than 4MB and it takes more than 14 seconds to start.

My `index.html` does the following scripts includes:

    &lt;script src=&quot;libs/angular2/bundles/angular2-polyfills.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;libs/systemjs/dist/system.src.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;libs/rxjs/bundles/Rx.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;libs/angular2/bundles/angular2.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;libs/angular2/bundles/http.dev.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;libs/jquery/jquery.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;libs/lodash/lodash.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;libs/bootstrap/js/bootstrap.js&quot;&gt;&lt;/script&gt;

And my systemJs initialization code looks like this:

        &lt;script&gt;
          System.config({
            defaultJSExtensions: true,
            paths: {
              &#39;*&#39;: &#39;libs/*&#39;,
              &#39;app/*&#39;: &#39;app/*&#39;
            },
            packageConfigPaths: [&#39;libs/*/package.json&#39;],
            packages: {
              app: {
                format: &#39;register&#39;,
                defaultExtension: &#39;js&#39;
              }
            }
          });
          System.import(&#39;app/main&#39;)
                .then(null, console.error.bind(console));

        &lt;/script&gt;

My public folder has the following structure:

    .
    ├── img
    ├── styles
    ├── app
    ├── libs
    |   └── angular2
    |   └── systemjs
    |   └── rxjs
    |   └── jquery
    |   └── lodash
    |   └── bootstrap
    └── index.html

A couple of screenshots of some of the js files that are being requested:
[![enter image description here][1]][1]



[![enter image description here][2]][2]


  [1]: http://i.stack.imgur.com/Srv3H.png
  [2]: http://i.stack.imgur.com/2osfs.png

Is there a way to avoid all of those requests?

Angular2 too many file requests on load

**Part of my code:**
&lt;!-- language: js --&gt;

    import {Injectable} from &#39;angular2/core&#39;;
    import {Http, Headers, Request, Response} from &#39;angular2/http&#39;;
    import {Observable} from &#39;rxjs/Observable&#39;;
    import &#39;rxjs/add/operator/map&#39;;

    @Injectable()
    export class myClass {

      constructor(protected http: Http) {}

      public myMethod() {
        let request = new Request({
          method: &quot;GET&quot;,
          url: &quot;http://my_url&quot;
        });

        return this.http.request(request)
          .map(res =&gt; res.json())
          .catch(this.handleError); // Trouble line. 
                                    // Without this line code works perfectly.
      }

      public handleError(error: Response) {
        console.error(error);
        return Observable.throw(error.json().error || &#39;Server error&#39;);
      }

    }

`myMethod()` produces exception in console of browser:

&gt; ORIGINAL EXCEPTION: TypeError: this.http.request(...).map(...).catch is not a function

How to catch exception correctly from http.request()?

What is wrong with my Angular code? I am getting the following error:

&gt; Cannot read property &#39;remove&#39; of undefined at BrowserDomAdapter.removeClass 
 
&lt;!-- language: lang-html --&gt;

    &lt;ol&gt;
      &lt;li *ngClass=&quot;{active: step===&#39;step1&#39;}&quot; (click)=&quot;step=&#39;step1&#39;&quot;&gt;Step1&lt;/li&gt;
      &lt;li *ngClass=&quot;{active: step===&#39;step2&#39;}&quot; (click)=&quot;step=&#39;step2&#39;&quot;&gt;Step2&lt;/li&gt;
      &lt;li *ngClass=&quot;{active: step===&#39;step3&#39;}&quot; (click)=&quot;step=&#39;step3&#39;&quot;&gt;Step3&lt;/li&gt;
    &lt;/ol&gt;

Angular: conditional class with *ngClass

What is the easiest way to stop mouse events propagation in Angular ?

Should I pass special `$event` object and call `stopPropagation()` myself or there is some other way.

For example in Meteor, I can simply return `false` from event handler.

Content Type	Original Author	Original Content on Stackoverflow
Question	Hongbo Miao	View Question on Stackoverflow
Solution 1 - Typescript	Mark Rajcok	View Answer on Stackoverflow
Solution 2 - Typescript	Günter Zöchbauer	View Answer on Stackoverflow
Solution 3 - Typescript	Rejwanul Reja	View Answer on Stackoverflow
Solution 4 - Typescript	samivic	View Answer on Stackoverflow
Solution 5 - Typescript	Donkixoot	View Answer on Stackoverflow

Can ngClass use ternary operator in Angular 2?

Typescript Problem Overview

Typescript Solutions

Solution 1 - Typescript

Solution 2 - Typescript

Solution 3 - Typescript

Solution 4 - Typescript

Solution 5 - Typescript

Filtering array of objects with lodash based on property value

Requiring a checkbox to be checked

Attributions