CODEWITHSUNDEEP
angularangular2-routingdata-manipulation
Sujith
Sujith

Reputation: 105

Passing Data from parent view to child view in Angular 2

I have a view which contains a mat table with user data in the parent view on selecting an entry in the table I want to be able to open a new view with the selected row data pre populated.

<mat-table [dataSource]="registeredUsersDataSource" matSort>

        <!-- First Name Column -->
        <ng-container matColumnDef="firstName">
          <mat-header-cell class="columnHeadingText" *matHeaderCellDef mat-sort-header> First Name
          </mat-header-cell>
          <mat-cell class="columnCellText" *matCellDef="let row"> {{row.firstName}} </mat-cell>
        </ng-container>

        <!-- Last Name Column -->
        <ng-container matColumnDef="lastName">
          <mat-header-cell class="columnHeadingText" *matHeaderCellDef mat-sort-header> Last Name </mat-header-cell>
          <mat-cell class="columnCellText" *matCellDef="let row"> {{row.lastName}} </mat-cell>
        </ng-container>

        <!-- E-mail Column -->
        <ng-container matColumnDef="emailId">
          <mat-header-cell class="columnHeadingText" *matHeaderCellDef mat-sort-header> E-mail </mat-header-cell>
          <mat-cell class="columnCellText" *matCellDef="let row"> {{row.emailId}} </mat-cell>
        </ng-container>

        <!-- Country Column -->
        <ng-container matColumnDef="country">
          <mat-header-cell class="columnHeadingText interCellPadding" *matHeaderCellDef mat-sort-header> Country
          </mat-header-cell>
          <mat-cell class="columnCellText interCellPadding" *matCellDef="let row"> {{row.country |
            codeToCountryConversion}} </mat-cell>
        </ng-container>

        <!-- Role Column -->
        <ng-container matColumnDef="role">
          <mat-header-cell class="columnHeadingText" *matHeaderCellDef mat-sort-header> Roles </mat-header-cell>
          <mat-cell class="columnCellText" *matCellDef="let row">
            <label *ngIf='row.rolesAccess[0]' class="columnCellText ">{{row.rolesAccess[0].role ===
              'API_ApplicationDeveloper' ? 'Developer' : row.rolesAccess[0].role }}</label> <br>
            <label *ngIf='row.rolesAccess[1]' class="columnCellText ">{{row.rolesAccess[1].role ===
              'API_ApplicationDeveloper' ? 'Developer' : row.rolesAccess[1].role }}</label> <br>
            <label *ngIf='row.rolesAccess[2]' class="columnCellText ">{{row.rolesAccess[2].role ===
              'API_ApplicationDeveloper' ? 'Developer' : row.rolesAccess[2].role }}</label>
          </mat-cell>

          <!-- <label *ngIf='{{row.rolesAccess[1].role}}' class="columnCellText ">{{row.rolesAccess[1].role}}</label>
              <label *ngIf='{{row.rolesAccess[2].role}}'class="columnCellText ">{{row.rolesAccess[2].role}}</label> </mat-cell>    -->
        </ng-container>

        <!-- Action Buttons Column -->
        <ng-container matColumnDef="actions">
          <mat-header-cell class="columnHeadingText" *matHeaderCellDef> Actions </mat-header-cell>
          <mat-cell class="columnCellText" *matCellDef="let row">

            <!-- Edit User -->
            <button title="Edit User" appDtsButton class="btnNoBorder" (click)="onClickRegisteredUsersEdit(row)">
              <sap-icon [iconName]="'sap-icon://edit'"></sap-icon>

              <!-- Used to pass row data into to view -->
              <app-edituser hidden="true" [value]='sujith'>
              </app-edituser>

            </button>

            <!-- Revoke User -->
            <button title="Revoke User" appDtsButton class="btnNoBorder" (click)="onClickRegisteredUsersRevoke(row)">
              <sap-icon [iconName]="'sap-icon://cancel'"></sap-icon>
            </button>
          </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="registeredUsersDisplayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: registeredUsersDisplayedColumns;">
        </mat-row>
      </mat-table>

This is the code I have in the child view to recieve the data and print it.

export class EdituserComponent implements OnInit {
@Input() value: string;

ngOnInit() {
console.log(this.value);

}

When I try to print it out i get undefined.

Ideally I want to be able to pass an object into the second view with all the details of the user.

Upvotes: 0

Views: 519

Answers (2)

Sunil
Sunil

Reputation: 11241

There are two issues here -

  1. Passing the @Input value
 <app-edituser hidden="true" [value]="'sujith'">
  1. The place where are you accessing the input value.

Its not necessary that you will be having the @Input value in ngOnInit method. You should look for @Input once the view is ready. So you can get it in in ngAfterViewInit function

ngAfterViewInit() {
   console.log(this.value);
}

Upvotes: 1

user184994
user184994

Reputation: 18301

If you use [] syntax, it will try to parse the value. In this example:

[value]='sujith'

Is looking for a variable called sujith.

Instead, you can either do

[value]='"sujith"'

Or

value='sujith'

Upvotes: 1

Related Questions