1

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.

wenn32
  • 1,256
  • 2
  • 17
  • 26

2 Answers2

3
@Component({
  selector: 'app-root',
  template: 'Waiting on port {{port}}',
})
export class AppComponent {
  port:number;
  someMethod() {
    this.port = 3000;
  }
}
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • sorry for the confusion, I have added an edit to the question. – wenn32 Feb 11 '17 at 17:29
  • Bindings **only** work when added statically to a template of a component. If you want to add bindings dynamically (from a response from the server or similar) you can create a component dynamically like explained in http://stackoverflow.com/questions/34784778/equivalent-of-compile-in-angular-2/37044960#37044960 – Günter Zöchbauer Feb 11 '17 at 17:33
  • what about simple static text's? – wenn32 Feb 11 '17 at 17:34
  • You can pass static text like shown in my answer. You just need to assign it to a field of a component or service and add a binding to the template as shown in my answer. You can also pass HTML, but Angular bindings just won't work this way. You might need to disable sanitizing for some content like shown in http://stackoverflow.com/questions/37076867/in-rc-1-some-styles-cant-be-added-using-binding-syntax/37076868#37076868 – Günter Zöchbauer Feb 11 '17 at 17:42
  • This might sound little strange but let say there is "
    ....
    ". Now I would like to grab only the and remove others and sent it to render. Will that be possible using Pipes?     – wenn32 Feb 11 '17 at 18:11
  • Sorry, but I don't get what you mean. `` is outside Angular. Where do you want to grab it from? – Günter Zöchbauer Feb 11 '17 at 18:13
  • lets say our component's template or templateurl's content has tags in them – wenn32 Feb 11 '17 at 18:15
  • I'm pretty sure Angular doesn't allow `` tags in templates. Templates need to be valid HTML and `` inside `` is invalid and an Angular component won't work if it's root component is not on the `` or a child of ``. If Angular wouldn't for some reason recognize that `` inside a components template is invalid, then the browser would just remove it when the component is added to the DOM. – Günter Zöchbauer Feb 11 '17 at 18:18
  • I just tried that and it works! my template content (app.component.html) "

    listening to server.

    "     – wenn32 Feb 11 '17 at 18:28
  • it indeed gives me the output but it appends inside our custom angular selector – wenn32 Feb 11 '17 at 18:28
  • What do you mean with "it works"? Does the DOM contain `` twice then, once at the top of the document and once inside the component? – Günter Zöchbauer Feb 11 '17 at 18:29
  • I'd suggest you completely drop any such attempt and consider an entirely new approach ;-) – Günter Zöchbauer Feb 11 '17 at 18:29
  • yup I wouldn't use it in production but I am playing around with angular 2 :) – wenn32 Feb 11 '17 at 18:34
  • Seems you enabled `ViewEncapsulation.Native`. That might change the situation a bit. But dynamically modifying the template by any means except bindings and directives like `*ngIf` and `*ngFor` is usually a bad idea. – Günter Zöchbauer Feb 11 '17 at 18:35
  • no, component is the same that I have posted in my question. I haven't added ViewEncapsulation either. – wenn32 Feb 11 '17 at 18:38
  • I just saw the `#shadow-root` node in your screenshot. I'm pretty sure that normally (default settings) that wouldn't be there. – Günter Zöchbauer Feb 11 '17 at 18:42
  • Firefox doesn't have shadow-root but results are same. It indeed outputs html inside html :D Angular 2 is good but I think it has a lot to catch up for things like getting an response writer object like you would in c# :) – wenn32 Feb 11 '17 at 18:50
  • Ok, would have to recherche the spec but actually I'm not that interested, because I don't intend to try that ;-) – Günter Zöchbauer Feb 11 '17 at 18:54
  • 1
    yeah :) anyways thank you so much for the patience in understanding my problem. Much appreciated :) – wenn32 Feb 11 '17 at 18:56
1

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.

Community
  • 1
  • 1
robstarbuck
  • 6,893
  • 2
  • 41
  • 40
  • If he would unconditionally set the value to `3000` he could use `port:number = 3000;` or just `template: 'Waiting on port 3000',`. This is why I used `someMethod()` because there has to be some "event" that causes the value to be set, but this information was not provided in the question. – Günter Zöchbauer Feb 11 '17 at 17:15
  • It's a good point, an event or some logic to determine the port would be required. In my instance the `this.port` might point to a promise for example. – robstarbuck Feb 11 '17 at 17:23
  • sorry for the confusion, I have added an edit to the question. – wenn32 Feb 11 '17 at 17:30