Multiple instances of same angular elements component

Question

This is my code:

In a .cshtml file:

<my-widget isfullscreen="false"></my-widget>
<my-widget isfullscreen="true"></my-widget>

In the component.ts file:

@Component({
  selector: 'my-widget',
  templateUrl: './my-widget.component.html',
  styleUrls: ['./my-widget.component.scss'],
  encapsulation: ViewEncapsulation.None,
  providers: [MyWidgetService]
})

export class MyWidgetComponent implements OnInit {

  _this: MyWidgetComponent = this;

  indicatorenum = Indicator;
  @Input() isfullscreen: string = 'false';

  get myGaugeModel(): MyGaugeModel {
    return this.myWidgetService.getGaugeModel();
  }

  get settings(): Settings {
    return this.myWidgetService.getSettings();
  }

  set settings(s: Settings) {
    this.myWidgetService.setSettings(s);
  }

  constructor(
    private myWidgetService: MyWidgetService
  ) { }

  ngOnInit() {
    if (this.isfullscreen) {
        this.settings = window['myWidgetSettings'];
        this.myWidgetService.initializeState(this.settings);
        this.myWidgetService.loadGauge(this.isfullscreen);
    } else {
      this.myWidgetService.initialize(this.isfullscreen);
    }
  }

  changeIndicator(i: Indicator) {
    this.settings.indicator = i;
    this.myWidgetService.loadGauges(this.isfullscreen);
  }
}

And in the .html file:

<div>
    <div [ngClass]="settings.indicator == indicatorenum.Absolute ? 'active' : ''" (click)="changeIndicator(indicatorenum.Absolute)">A</div>
    <div [ngClass]="settings.indicator == indicatorenum.Relative ? 'active' : ''" (click)="changeIndicator(indicatorenum.Relative)">R</div>
</div>

The problem I have is this: when I click on the indicator Absolute field, that field becomes active in both components. What I want: in component 1 if I click Absolute, and then in component B if I click Relative, then in component A Absolute should still be clicked.

The settings property at the moment is shared between the components. How can I access both components' settings field?

score -1 · Answer 1 · answered Oct 13 '21 at 07:57

-1

Both 'true' and 'false' evaluate to a true value in javascript.

You should try:

@Input() isfullscreen: boolean = false;

and

<my-widget [isfullscreen]="false"></my-widget>
<my-widget [isfullscreen]="true"></my-widget>

answered Oct 13 '21 at 07:57

One.Punch.Leon

602
3
10

That has nothing to do with what I need, I can parse it to boolean if I want. This doesn't fix my problem. – petko_stankoski Oct 13 '21 at 08:46

Multiple instances of same angular elements component

1 Answers1