feat(stepper): activate step initially

Author: mmart1n

Diff for: projects/igniteui-angular/src/lib/stepper/stepper.component.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import {
     AfterViewInit, Component, HostBinding, OnDestroy, OnInit,
     Input, Output, EventEmitter, ContentChildren, QueryList, ElementRef,
-    NgModule, OnChanges, SimpleChanges, TemplateRef, ContentChild
+    NgModule, OnChanges, SimpleChanges, TemplateRef, ContentChild, AfterContentInit
 } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -60,7 +60,7 @@ import { IgxStepperService } from './stepper.service';
         { provide: IGX_STEPPER_COMPONENT, useExisting: IgxStepperComponent },
     ]
 })
-export class IgxStepperComponent extends IgxCarouselComponentBase implements OnInit, OnChanges, AfterViewInit, OnDestroy {
+export class IgxStepperComponent extends IgxCarouselComponentBase implements OnInit, OnChanges, AfterContentInit, AfterViewInit, OnDestroy {
 
     /** @hidden @internal **/
     @HostBinding('class.igx-stepper')
@@ -317,6 +317,14 @@ export class IgxStepperComponent extends IgxCarouselComponentBase implements OnI
         });
     }
 
+    /** @hidden @internal */
+    public ngAfterContentInit() {
+        const activeStep = this.steps.find(s => s.active);
+        if (!activeStep && this.steps[0]) {
+            this.steps[0].active = true;
+        }
+    }
+
     /** @hidden @internal */
     public ngAfterViewInit() {
         this._steps.changes.pipe(takeUntil(this.destroy$)).subscribe(() => {

Diff for: src/app/stepper/stepper.sample.html

@@ -38,8 +38,8 @@
             <igx-icon>check</igx-icon>
         </ng-template> -->
 
-        <igx-step [active]="true" #step (activeChange)="activeStepChange($event)"
-            [isValid]="form1.form.valid || form1.form.pristine" [completed]="form1.form.valid && stepper.linear">
+        <igx-step #step (activeChange)="activeStepChange($event)" [isValid]="form1.form.valid || form1.form.pristine"
+            [completed]="form1.form.valid && stepper.linear">
             <igx-icon igxStepIndicator>face</igx-icon>
 
             <span igxStepTitle>Step No 0</span>
@@ -69,17 +69,18 @@
             <span igxStepTitle>Step No 1</span>
             <span igxStepSubTitle>Step SubTitle</span>
             <div igxStepContent class="sample-body">
-               Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum eos asperiores, doloribus reiciendis, esse earum, iusto expedita rem quo mollitia voluptatem quas saepe quia! Rem illum quo officia eum quisquam?
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum eos asperiores, doloribus reiciendis, esse
+                earum, iusto expedita rem quo mollitia voluptatem quas saepe quia! Rem illum quo officia eum quisquam?
             </div>
         </igx-step>
 
-        <igx-step #step2 (activeChange)="activeStepChange($event)"
+        <igx-step #step2 [active]="true" (activeChange)="activeStepChange($event)"
             [isValid]="form2.form.valid || form2.form.pristine" [completed]="form2.form.valid && stepper.linear">
 
             <div igxStepIndicator>
                 <div class="avatar-indicator">
                     <igx-avatar src="https://www.infragistics.com/angular-demos/assets/images/men/1.jpg"
-                                [roundShape]="true"></igx-avatar>
+                        [roundShape]="true"></igx-avatar>
                     <igx-badge icon="check" type="success"></igx-badge>
                 </div>
             </div>