Angular: Setting component property outside of the component

Question

I have an Angular page that uses a component to display some of its properties. But the properties from the component don't display on the page. Here is the code:

HTML page (testPage.component.html)

<p>title: {{title}}</p>
<p>another title: {{anotherTitle}}</p>

TypeScript (testPage.component.ts)

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

@Component({
  selector: 'app-testPage',
  templateUrl: './testPage.component.html',
  styleUrls: ['./testPage.component.css']
})
export class TestPageComponent implements OnInit {
  title: string;
  anotherTitle = "This is another title";

  setTitle(): void {
    this.title = "This is title!!";
    console.log('This is title', this.title);
  }
}

var testPageComponent = new TestPageComponent();
//newBudgetComponent.title = "some title here!!"; //Also not working
testPageComponent.setTitle();

In the page, anotherTitle gets populated just fine, but title doesn't populate.

The function setTitle logs the title, but the Angular page doesn't display the value.

Here is how the page looks:

How do I set the component property outside of the component?

Please share the use case. There's likely a couple ways to do this, but at the end of the day, _why are you trying to set a value from outside the application?_ — random_user_name, Oct 18 '18 at 18:46

score 0 · Answer 1 · answered Oct 18 '18 at 18:46

Are you trying to set the page title? if so then use the Title service

import { Title } from '@angular/platform-browser';

constructor(private titleService: Title)

this.titleService.setTitle("Title");

Otherwise use a shared service with a behavior subject unless it is a child component then use Input

score 0 · Answer 2 · answered Feb 20 '19 at 03:22

There are a few ways to achieve this. First, the interaction of components in Angular and how they display on the page is a little less straightforward than the example you're trying to show an example with. Please refer to this link to learn more about the component lifecycle in Angular.

As for setting the values of properties on a component, here are a few examples. Please keep in mind that some of this might need tweaking as I did not write it in an IDE/run the code.

Default Value

Your example already does this. When the component is created, the default value of that field is already set. title = 'My Title'

Input Decorator

Decorating your property with @Input() allows you to pass data from a parent component to a child component. <my-child-component [title]='value-or-variable'></my-child-component>

ViewChild Decorator and the ViewChildren Decorator

Decorating a "component" property (in this case the child component in the parent) with the @ViewChild() decorator will allow the parent component to have access to the child component and work with it's properties. Keep in mind the component indicated must be a child component of the parent component. @ViewChild(MyChildComponent) child: MyChildComponent; then after the parent component's init cycle is done this.child.title = 'My Title';

ContentChild Decorator and the ContentChildren Decorator

Decorating a "component" property (in this case the child component in the parent or in any descendents) with the @ContentChild() decorator will allow the parent component to have access to the descendents components and work with their descendents and properties. Keep in mind the component indicated can be any descendents component of this parent. @ContentChild(MyDescendentComponent) descendent: MyDescendentComponent; then after the init cycles are done this.descendent.title = 'My Title';

Dependency Injection for Services, tokens, and values

Provided objects can be injected into the component and set values for the component ideally in the ngOnInit method. The provider can be set at a few different levels including (but not limited to) the component modules. This link goes far more in depth on dependency injection even though it's slightly older.

class MyComponent {
  constructor(myService: MyService) {}
}

//module
providers: [
  MyTitleToken,
],

//component
class MyComponent {
  constructor(public title: MyTitleToken) {}
}

//module
providers: [
  {provide: 'MyTitle', useValue: 'Hello Title'},
],

//component
class MyComponent {
  constructor(@Inject('MyTitle') title: string) {}
}

Angular: Setting component property outside of the component

2 Answers2