title: Creating Composite Components in Angular
body: <p>I want to create a <code>Angular</code> generic composite component which is composed of bunch of input fields which could be used inside multiple components across application.</p>
  
  <p>For Example:
  Consider a USER DETAIL component which has following Fields,</p>
  
  <ul>
  <li>Email - InputText Field</li>
  <li>Gender-Radio button.</li>
  <li>Age Group - A Dropdown</li>
  <li>Description - A Text Area.</li>
  </ul>
  
  <p>I want to include this <code>USER DETAIL</code> component in multiple components as below:</p>
  
  <p><a href="https://i.stack.imgur.com/0UNiZ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0UNiZ.jpg" alt="enter image description here"></a></p>
  
  <p>From Conventional wisdom I can say, that I just include <code>&lt;app-userdetails&gt;</code> in multiple components.</p>
  
  <p>But how Do I Handle the submitted <code>FormGroupData</code>? 
  I mean how do I get the data from <code>UserDetail</code> when its included in another component like <code>CreateEmployee</code>?</p>
  
  <p>I am not sure if I explained the above scenario properly, please point me to any web-examples or existing questions about this.</p>