title: Add custom properties on formio builder
body: <p>I want to create something like this</p>
  
  <p><a href="https://i.stack.imgur.com/7fN3X.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7fN3X.png" alt="enter image description here"></a></p>
  
  <p>I want to create a card which contains tags such as pharagraph, iframe, also inputs. I have successfully added custom component to my form builder but i need to pass a property for my new component. like, i have a component for iframe, but i need to pass a url to that component, anyone know how?</p>
  
  <p>Here's my codefor one of the component</p>
  
  <pre><code>&lt;div style="width: 100%;margin-top: 20px;"&gt;
            &lt;nb-card&gt;
              &lt;nb-card-body class="myIframe"&gt;
                &lt;iframe src="https://www.youtube.com/embed/gSfc4GhlZ44" frameborder="0" webkitallowfullscreen
                  mozallowfullscreen allowfullscreen&gt;&lt;/iframe&gt;
              &lt;/nb-card-body&gt;
            &lt;/nb-card&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>i want that iframe src to be dynamic and users can insert their url to that property. i appreciate any help</p>
  
  <p>EDIT</p>
  
  <p>Here's my builder html code</p>
  
  <pre><code>    &lt;form-builder [form]="form" (change)="onChange($event)"&gt;&lt;/form-builder&gt;
  &lt;div class="well jsonviewer"&gt;
      &lt;pre id="json"&gt;&lt;code class="language-json" #json&gt;&lt;/code&gt;&lt;/pre&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and builder.ts</p>
  
  <pre><code>export class StepBuilderComponent {
  
    @ViewChild('json', {static: false}) jsonElement?: ElementRef;
    public form: Object = {
      components: []
    };
    onChange(event) {
      this.jsonElement.nativeElement.innerHTML = '';
      this.jsonElement.nativeElement.appendChild(document.createTextNode(JSON.stringify(event.form, null, 4)));
    }
  
  }
  </code></pre>