CODEWITHSUNDEEP
javascriptangulartypescript
wenn32
wenn32

Reputation: 1382

Angular 2 modify view html after processing

I have below angular 2 code

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: 'Waiting on port ',
})
export class AppComponent {
}

As an example I would like to append text "3000" to the template output dynamically. How can this be achieved?

So, final output must be "Waiting on port 3000"

EDIT: I should have been a bit more specific. I was expecting answer something like a response object where I could modify the html before it is sent to "frontend" rendering. So, Angular 2 would process binding all the details in the template and then I get the modify the html.

Upvotes: 1

Views: 127

Answers (2)

robstarbuck
robstarbuck

Reputation: 8101

Further to Günter Zöchbauer's answer, if you wanted the method to fire when the component's initialized you could use ngOnInit as your method, "called after data-bound properties of a directive are initialized" (from the docs).

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template: 'Waiting on port {{port}}',
})
export class AppComponent implements OnInit {
  port:number;
  ngOnInit(): void {
    this.port = 3000;
  };
}

OnInit must be included in your import.

Upvotes: 1

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657761

@Component({
  selector: 'app-root',
  template: 'Waiting on port {{port}}',
})
export class AppComponent {
  port:number;
  someMethod() {
    this.port = 3000;
  }
}

Upvotes: 3

Related Questions