title: How to build a property grid in Angular 2+
body: <p>I am building an IDE type application in <code>Angular 6</code> specific to my domain where I need to allow the user to edit properties of C# objects. Think of the Visual Studio property grid for a Windows Forms or Web Forms project where you can click on a button on the form and in the property grid you can change the properties of the button (e.g. color,size,text,etc).</p>
  
  <p>I had the idea of sending a <code>json</code> string to the client that includes the properties of the object with their current values. Something like this:</p>
  
  <pre><code>{
  "id":1,
  "name":"Volume",
  "type":"VolumeCalculator",
  "properties":
  [
    {
      "name":"NumberOfLevels",
      "type":"int",
      "value":2
    },
    {
      "name":"Period",
      "type":"object",
      "properties":
      [
        {
          "name":"From",
          "type":"DateTime",
          "properties":
          [
            {
              "name":"FromDate",
              "type":"Date",
              "value":"01/01/2018"
            },
            {
              "name":"FromTime",
              "type":"Time",
              "value":"12:00:00"
            }
          ]
        },
        {
          "name":"Until",
          "type":"DateTime",
          "value":"02/01/2018 12:00:00"
        }         
      ]
    },
    {
      "name":"TreeType",
      "type":"enum",
      "value":2,
      "options":["Path Graph","Star Like"]
    }
  ]
  }
  </code></pre>
  
  <p>With this <code>json</code> string I have all the information I need to build a <code>grid</code>. Different data types will present different editors. A <code>DateTime</code> type would allow the user to click a calendar icon to bring up a calendar and choose a value. An <code>Enum</code> type would present a drop down where the user would pick from the provided values.</p>
  
  <p>Where I am struggling is I am relatively new to <code>Angular 6</code> development. I have built some simpler applications so I am familiar with beginner level <code>Angular</code> concepts. I think this problem requires a bit more advanced concepts that I am just unfamiliar with so am looking for pointers. Perhaps this should be a directive? Perhaps it is just a component itself and no directive is necessary.</p>
  
  <p>I am not asking for a complete solution (however, if someone wants to provide one I won't complain), just some direction from the <code>Angular</code> experts.</p>
  
  <p>I am even interested in just buying a library that already provides the functionality, but so far I have been unable to find one that supports <code>Angular 6</code>. If anyone knows of one, I am happy to review it to see if it will work for me.</p>