¿Cómo cambiar el elemento a entrada o desplegable en forma angular?

Estoy haciendo la aplicación angular 6, donde estoy usando la forma dinámica angular y los valores provienen de JSON ..

Simple JSON:

  jsonData: any = [
    {
      "elementType": "dropdown",
      "key": 'project',
      "label": 'Choose option to display',
      "options": [
        { "key": 'inputbox', "value": 'Show Project Level as input box' },
        { "key": 'dropdown', "value": 'Show Project Level as dropdown' }
      ],
      "order": 1
    },
    {
      "elementType": "textbox",
      "class": "col-12 col-md-4 col-sm-12",
      "key": "project_level",
      "label": "Project Level as input box",
      "type": "text",
      "value": "",
      "order": 2
    },
    {
      "elementType": "dropdown",
      "key": 'project_level',
      "label": 'Choose Project Level as dropdown',
      "options": [
        { "key": 'low', "value": 'Low' },
        { "key": 'medium', "value": 'Medium' },
        { "key": 'high', "value": 'High' }
      ],
      "order": 2
    }
  ];

Requirement va a ser de este json solamente ..

Echa un vistazo a Ejemplo de trabajo claro https: //stackblitz.com/edit/angular-x4a5b6-5ys5h,

Puede ver que en la etapa inicial tengo tanto cuadro de entrada como dropdwon ... Pero primero necesito tener un cuadro de texto solo si elijo Mostrar el nivel de proyecto como menú desplegable desde el primer menú desplegable, luego la clave project_level debe cambiar como cuadro de selección y viceversa sucederá ..

Orden 1 tiene un menú desplegable en el que tengo dos opciones,

      "options": [
        { "key": 'inputbox', "value": 'Show Project Level as input box' },
        { "key": 'dropdown', "value": 'Show Project Level as dropdown' }
      ],

Si elegimos laprimerpción @ que tiene valor como Mostrar nivel de proyecto como cuadro de entrada, mientras que si elegimossegund opción que tiene valor Mostrar nivel de proyecto como menú desplegable ..

e acuerdo con la selección anterior, necesito cambiar el elemento de formulario en consecuencia, por ejemplo, el usuario eligióShow Project Level as input box, entonces necesito mostrar elinput box,

    {
      "elementType": "textbox",
      "class": "col-12 col-md-4 col-sm-12",
      "key": "project_level",
      "label": "Project Level as input box",
      "type": "text",
      "value": "",
      "order": 2
    },

Mientras que si el usuario eligióShow Project Level as dropdown, entonces necesito mostrar eldesplegabl,

    {
      "elementType": "dropdown",
      "key": 'project_level',
      "label": 'Choose Project Level as dropdown',
      "options": [
        { "key": 'low', "value": 'Low' },
        { "key": 'medium', "value": 'Medium' },
        { "key": 'high', "value": 'High' }
      ],
      "order": 2
    }

Entonces elllav va a ser único solo project_level pero solo el elemento de formulario debe cambiarse en función de la selección de cuadro de entrada o cuadro de selección ..

Por favor, ayúdenme a cambiar el elemento del formulario según la selección enorder 1 desplegable.

e espera que @Result solo use la forma angular pura y mecanografiada / javascript sin jquery ..

Respuestas a la pregunta(1)

Su respuesta a la pregunta