I am trying to set true or false depending passing values but not working in angular 8.If anyone know please help to resolev this issue.

When one is set to true, I want all the others to be set to false as well.

appponent.ts:

this.main = { 
    power: false,
    electrical: false,
    wire: false,
    current: false
}

testing(flag){ 
    this.main[flag]=true;
}

testing(wire);

I am trying to set true or false depending passing values but not working in angular 8.If anyone know please help to resolev this issue.

When one is set to true, I want all the others to be set to false as well.

app.ponent.ts:

this.main = { 
    power: false,
    electrical: false,
    wire: false,
    current: false
}

testing(flag){ 
    this.main[flag]=true;
}

testing(wire);

• javascript
• angular

4 Answers 4

Assuming you're inside a ponent class, wire is not defined when you call testing. It needs to be a string to work. Also, you're using this wrong. Try:

main = { 
  power: false,
  electrical: false,
  wire: false,
  current: false
}

testing(flag){ 
  this.main[flag] = true;
}

Then somewhere inside another function of the same ponent:

this.testing("wire");

UPDATE: From what I understand, you want a function that sets 1 property to true and the rest to false. Try this:

testing(flag) {
  for(let key in this.main) {
    this.main[key] = key == flag;
  }
}

Stackblitz to showcase.

Put your key in between quotes "" or '' .

For example

app.ponent.ts

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

@Component({
 selector: 'my-app',
 templateUrl: './app.ponent.html',
 styleUrls: [ './app.ponent.css' ]
})

export class AppComponent  {
 name = 'Angular';
 main = { 
  power: false,
  electrical: false,
  wire: false,
  current: false
 }

 constructor(){
  this.testing('wire');
 }

 testing(flag){ 
  //this.main[flag]=true;
  Object.keys(this.main).map( key => {
    this.main[key] = key === flag ?  true : false; 
  })
 }
}

app.ponent.html

<hello name="{{ name }}"></hello>
<p>wire - {{main.wire}}</p>
<p>power - {{main.power}}</p>
<p>electrical - {{main.electrical}}</p>
<p>current - {{main.current}}</p>

See working example here - https://stackblitz./edit/angular-yzq8ju?file=src%2Fapp%2Fapp.ponent.html

All others answesr is working but I was thinking about a new way

  main = {
    power: false,
    electrical: false,
    wire: false,
    current: false
  };

  flagsValues = null;

  ngOnInit() {
    this.flagsValues = {
      ...this.main
    };
  }

  testing(flag) {
    this.flagsValues = {
      ...this.main,  // object spread
      [flag]: true  //overwrite passed falg with true
    };
  }

demo ⚡

with Object.assign

  testing(flag) {
    this.flagsValues = Object.assign({},this.main)
    this.flagsValues[flag] = true; 
  }

main={ 
power:false,
electrical:false,
wire:false,
current:false
}

testing(flag){ 
Object.keys(this.main).map( key => {
    this.main[key] = key === flag ?  true : false; 
  })
}

this.testing('wire');

Please try like this

Please check on https://stackblitz./edit/angular-yzq8ju