title: How i can add an item that takes value from an angular material form?
body: <p>I have a dynamic navbar which keep its items in an array. I can add item on it but just static. I want to add item which takes value from the form input area.</p>
  
  <p>This is my .ts file</p>
  
  <pre><code>export class NavbarComponent implements OnInit {
  
  MenuItem: MenuItemModels[] = [
  { name : "Home" , link : "#" },
  { name : "About" , link : "#" },
  { name : "School" , link : "#" },
  { name : "Staff" , link : "#" },
  { name : "Contact" , link : "#" }
  
  ];
  addItem(){
  
  let customObj = new MenuItemModels();
  customObj.name = "something";
  customObj.link = "#"; 
  this.MenuItem.push(customObj);
  
  }
  </code></pre>
  
  <p>This is my Model</p>
  
  <pre><code>export class MenuItemModels {
  
  name: any; 
  link: any;
  
  }
  </code></pre>
  
  <p>This is my form component it is a different component i want to value from this form inputs and add them on my MenuItemList</p>
  
  <pre><code>&lt;div class="example-container"&gt;
  &lt;mat-form-field&gt;
  &lt;input matInput placeholder="Input"&gt;
  &lt;/mat-form-field&gt;
  
  &lt;mat-form-field&gt;
  &lt;textarea matInput placeholder="Textarea"&gt;&lt;/textarea&gt;
  &lt;/mat-form-field&gt;
  
  &lt;mat-form-field&gt;
  &lt;mat-select placeholder="Select"&gt;
    &lt;mat-option value="option"&gt;Option&lt;/mat-option&gt;
  &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  &lt;/div&gt;
  </code></pre>