TypeScript : Object.assign Array and parsing data to web page

Question

I understand that using object.assign in typescript is

Object.assign({},a , b) . target...source. However, i am trying to understand how can i fetch data from file to another.

For an instance , my main.ts file , i declared an array ..

  ..
  template:`<testing [config]="_headerConfig"></testing> `
  ..
   private _headerConfig = { 
         buttons:[
         icon: "md-alarm", //this can be change depending on own preffered icon logo
         type : "btn"
  ]
 };

i created a second ts.file . Lets call it testing.ts for now. this file will communicate with main.ts. The parent ts(main) file will parse data for icons and type to testing.ts .

  ..
  ..
  @Component
  selector: "testing";
  ..
  ..
  ..

    //i am not sure if i do need to declare this as empty array object.
   //first i declared an an empty array

    public button_message :  any =[{}];

  //setting default values
   private _defaultConfig: any = {
    leftButton : [{icon : "Default",
                   path : "Default"}
                 ],
    }; 

 //this is where i used object.assign I want

  let config = this.config.leftButton;
  console.log ("object 1 is developer input" , config); //this will display the inputs from main.ts
  let defaultConfig = this._defaultConfig.leftButton; //this will display the input from the _defaultConfig
  console.log ("object2 is default input", defaultConfig)

  let finalConfig = Object.assign({}, config, defaultConfig);
    console.log("This is Object Assing log" , finalConfig)

I tried countless ways to figure this part which is If there is input icon inside testing.ts , it will display as md-alarm . else it will run as the _defaultConfig which icon is default.

The thing i am not sure how to get the data inside the array . i tried using index pointer but it is returning as a whole.

in my html page , i tried using string interpolation to bind the data from my second.ts file. but it always gives me error. for an example.

i want to bind data input icon by developer to "md-alarm", for an example , this is my second.html which linked to second.ts

        <button  class="logo-btn">
            <name="{{button_message.icon}}">
            </>
        </button>

No msg was parsed . Any help would be greatly appreciated.

Answer 1

Let's see if I understood you correctly. I would assign the default values already in the parent component, eg:'

private _headerConfig = {
    buttons: [
        {
            leftButton: {
                icon: "md-1-default"
                type: "btn"
            },
        },
        {
            rightButton: {
                icon: "md-2-default"
                type: "btn"
            },
        },
    ]
};

then you have this, which passes your _headerConfig to child

<testing [config]="_headerConfig"></testing>

in your child component you need the following:

@Input() config;

well you capture the values in OnInit :

ngOnInit() {
    console.log(JSON.stringify(this.config));
}

that would output:

{"buttons":[{"leftButton":{"icon":"md-2-default","type":"btn"}},{"rightButton":{"icon":"md-2-default","type":"btn"}}]}

Apparently you want to take user input and change these default values. For that you can use eg

(ngModelChange)="updateValue(your parameter)"

Not knowing actually HOW you are doing that, I'll just assing leftButton with a new custom value manually:

this._headerConfig.buttons[0] = { leftButton: { icon: 'custom', type: 'custom' } }

Then you do just what you want with the values. You can follow the changes in your child view if you like:

<div>{{config | json}}</div>

So the above change would JSON stringified then look like this:

{"buttons":[{"leftButton":{"icon":"custom","type":"custom"}},{"rightButton":{"icon":"md-1-default","type":"btn"}}]}