title: Angular Multi component Page Design
body: <p><strong>Technology Stack :</strong></p>
  
  <p>Angular 6 </p>
  
  <p>Angular Material </p>
  
  <p>I am working on an a Single Page Application in <code>Angular 6 and Angular material</code> which has only one <code>PAGE</code>.</p>
  
  <p>The page has three sections apart from header and footer as  : </p>
  
  <p>Search Section 
  Download Section 
  List student record section </p>
  
  <p>I want to make the Angular application as modular and hence decided to use below three components to represent three sections : </p>
  
  <p>SearchComponent 
  StudentRecordComponent 
  DownloadComponent </p>
  
  <p>My question is : </p>
  
  <p>These individual components will have its <strong>OWN HTML</strong> and the <strong>final PAGE</strong> will have references to all these components. (index.html will bootstrap the root component )</p>
  
  <p>Means , every section of the page will come from <strong>INDIVIDUAL COMPONENTS .</strong> 
  Is my design correct with respect to this ? </p>
  
  <p>More specifically , pseudo code for the HTML for the page is given below as a <strong>template for root component</strong> (<code>app.component.html</code>)</p>
  
  <p><strong>Root Component Template</strong> should contain reference to all these components. </p>
  
  <p>So typical implementation would be  :</p>
  
  <pre><code>@Component({
    selector: 'app-comp',
    styleUrls: ['./app.component.css'],
    templateUrl : './app.component.html'
  })
  export class AppComponent {
    title = 'app';
  }
  </code></pre>
  
  <p>whereas <strong>app.component.html</strong> will have below mark up. </p>
  
  <pre><code> &lt;div id="mainDiv"&gt;
  
   &lt;div&gt;
      &lt;search-component&gt;&lt;/search-component&gt; &lt;!-- Search component HTML --&gt; 
   &lt;/div&gt;
  
   &lt;div&gt;
      &lt;download-component&gt;&lt;/download-component&gt; &lt;!-- Download component HTML --&gt; 
   &lt;/div&gt; 
  
   &lt;div&gt;
      &lt;StudentRecordComponent&gt;&lt;/StudentRecordComponent&gt;  &lt;!-- Student Record component HTML --&gt; 
   &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>