I'm not sure why the change detection wouldn't work here. I've tried a few things, including a setTimeout. I'm using RC5. Basically I want to change the content based off of a parameter in my URL. Should be pretty simple right?

thanks.ts

import { Component } from '@angular/core';
import { Card } from '../../ponents/card/card';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'sd-thanks',
  styleUrls: ['thanks.css'],
  directives: [Card],
  templateUrl: 'thanks.html'
})
export class Thanks {
  params: any;
  ing: any;
  constructor(public route: ActivatedRoute) {
    this.params = this.route.params.subscribe(
      params => {
        thising = params['ing'];
        console.log(thising); // this consoles the correct true/false value
      }
    );
  }
}

thanks.html

<card>
  <div *ngIf="ing" class="card-content">
    <span class="card-title">We can't wait to see you!</span>
  </div>
  <div *ngIf="!ing" class="card-content">
    <span class="card-title">We will certainly miss you!</span>
  </div>
</card>

I'm not sure why the change detection wouldn't work here. I've tried a few things, including a setTimeout. I'm using RC5. Basically I want to change the content based off of a parameter in my URL. Should be pretty simple right?

thanks.ts

import { Component } from '@angular/core';
import { Card } from '../../ponents/card/card';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'sd-thanks',
  styleUrls: ['thanks.css'],
  directives: [Card],
  templateUrl: 'thanks.html'
})
export class Thanks {
  params: any;
  ing: any;
  constructor(public route: ActivatedRoute) {
    this.params = this.route.params.subscribe(
      params => {
        this.ing = params['ing'];
        console.log(this.ing); // this consoles the correct true/false value
      }
    );
  }
}

thanks.html

<card>
  <div *ngIf="ing" class="card-content">
    <span class="card-title">We can't wait to see you!</span>
  </div>
  <div *ngIf="!ing" class="card-content">
    <span class="card-title">We will certainly miss you!</span>
  </div>
</card>

• javascript
• angular
• angular2-routing
• angular2-changedetection

Share Improve this question Follow asked Sep 2, 2016 at 7:13 jaruesinkjaruesink 1,20322 gold badges1414 silver badges2424 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Params can only be strings because they e from the URL

If you change it to

this.ing = params['ing'] && params['ing'].toLowerCase() === 'true';

it should work.