title: How to combine angular routing with angular material stepper(https://material.angular.io/components/stepper/overview) using template driven form?
body: <p>I want to load a new component on each step of Angular Material Stepper(<a href="https://material.angular.io/components/stepper/overview" rel="nofollow noreferrer">https://material.angular.io/components/stepper/overview</a>) with its own routing using template driven form. Can Please anyone help me on this?</p>
  
  <p>Ex:
  I have routing like this: </p>
  
  <pre><code>{
                  path: 'parent',
                  component: Parentcomponent1,
                  children: [
                      {
                          path: '',
                          redirectTo: 'child1',
                          pathMatch: 'full'
                      },
                      {
                          path: 'child1',
                          component: child1Component
                      },
                      {
                          path: 'child2',
                          component: child2Component
                      }
  }
  </code></pre>
  
  <p>Parentcomponent1.html => </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-horizontal-stepper&gt;
    &lt;mat-step [routerLink]="child1"&gt;&lt;/mat-step&gt;
    &lt;mat-step [routerLink]="child2"&gt;&lt;/mat-step&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/mat-horizontal-stepper&gt; 
  </code></pre>
  
  <p>It is not working. Is there any alternative way or something need to add to made it work?</p>