Q: Passing the input parameters dynamically in angular template I have more-options-menu component in angular. It has few input params like- size, color, inline etc, any my angular selector looks like this-
<more-options-menu size="40" color="accent"></more-options-menu>

And the component looks like this-
import {Component, OnInit} from '@angular/core';
import { MIconRegistry } from '@once/ui';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'more-options-menu',
  template: '<my-icon size svgIcon color inline></my-icon>',
  inputs: ['color', 'svgIcon', 'size', 'inline']
})
export class MoreOptionsMenuComponent implements OnInit {
  size;
  svgIcon;
  color;
  inline;
  constructor(
    private IconRegistry: MIconRegistry,
    private domSanitizer: DomSanitizer
  ) {
    this.IconRegistry.addSvgIconSet(
      this.domSanitizer.bypassSecurityTrustResourceUrl(
        'https://s3.amazonaws.com/hello/135790/20/symbol-defs.svg?8ctxpf'
      )
    );

    this.IconRegistry.addSvgIconSet(
      this.domSanitizer.bypassSecurityTrustResourceUrl(
        'https://s3.amazonaws.com/hello/135790/24/symbol-defs.svg?8ctxpf'
      )
    );
  }
}

I want to make these parameters dynamically. I want whatever inputs are passed to more-options-menu to go directly to my-icon component. more-options-menu is a wrapper component for my-icon. I'm trying to see if I can just wrap the my-icon component so that I won't have to update more-options-menu every time I update my-icon component
 i.e. provide a fix so we won't have to update it (more-options-menu) thereafter.

A: You could just pass an entire object through and do something like the following:
First declare an interface and make the properties optional:
interface IValues{
    color?: string;
    svgIcon?: string;
    ...
}

Then in your component expect the input of that Interface type:
@Input('values') values: IValues;

This now allows you to pass an object of whatever you want through to your component - just make sure to null check all your values before using them:
<more-options-menu [values]='valuesIWantToPass'></more-options-menu>

Where valuesIWantToPass == {color= 'abc'}

Edit:
From the comments, just pass it right on through as an input straight into my-icon. i.e. identical @Input('values') values: IValues; on both your components and then <my-icon [values]='valuesIWantToPass'></more-options-menu>
See this stackblitz: https://stackblitz.com/edit/angular-ohua5z
