CODEWITHSUNDEEP
angularangular6angular7
zaid khan
zaid khan

Reputation: 213

Passing *ngFor Object to child component angular 6

This is my parent component .ts

import { Component, OnInit } from '@angular/core';
import {QuestionService} from '../services/question.service'
import { IQuestion } from '../interfaces/iQuestion';
import {ToastrService} from '../services/toastr.service';

@Component({
  selector: 'app-view',
  templateUrl: './view.component.html',
  styleUrls: ['./view.component.css']
})
export class ViewComponent implements OnInit {

  Questions : IQuestion[];
  Question : IQuestion ={};
  constructor(private _question : QuestionService, private _toastr :ToastrService ) { }

  ngOnInit() {
    this._question.getQuestions("1").subscribe((data) => {this.Questions = data;}, (err) => {
      this._toastr.error("there is some problem at the server")
    });
  }
}

Below in my parent componenet html

<content *ngFor="let question of Questions; let i = index">
  <div class="col-lg-10">
   <b> Question {{i + 1}} : </b> {{question.question}}
  </div>
  <div class="col-md-10">
   <b> Answer :</b> {{question.answer}}
  </div>
  <div class="col-md-10">
    <b> Option A :</b> {{question.optionA}}
  </div>
  <div class="col-md-10">
    <b>Option B :</b> {{question.optionB}}
  </div>
  <div class="col-md-10">
    <b>Option C :</b> {{question.optionC}}
  </div>
  <div class="col-md-10">
    <b> Option D :</b> {{question.optionD}}
  </div>
  <div class="col-md-10">
    <b>Selected Option :</b> {{question.key}}
  </div>
  <div class="col-md-10">
    <b>  Subject :</b> {{question.subject}}
    </div>
    <div class="col-sm-5">
      <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>
      </div>


</content>
<div class="col-sm-5">
  <edit-question [Question]="question"></edit-question>
  </div>

Below is my child component html which is basically a popup model

<div>
  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Edit Question</h4>
        </div>
        <div class="modal-body">
          <p>this = {{Question.Question}}</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>

Below is my child component .ts

import { Component, OnInit, Input } from '@angular/core';
import { IQuestion } from '../interfaces/iQuestion';

@Component({
  selector: 'edit-question',
  templateUrl: './edit-question.component.html',
  styleUrls: ['./edit-question.component.css']
})
export class EditQuestionComponent implements OnInit {
  @Input()
  Question : IQuestion ={};

  constructor() { }

  ngOnInit() {

    console.log(this.Question.Question);
  }

}

Now when a mymodel is clicked i want to pass that specific object to child component for editing purpose. But i am not able to get the object. Any kind of help will really be appriciated.

Upvotes: 0

Views: 754

Answers (1)

Sunil
Sunil

Reputation: 11243

<edit-question [Question]="question"></edit-question> is out of *ngFor context.

It should be inside as -

<content *ngFor="let question of Questions; let i = index">
  <div class="col-lg-10">
   <b> Question {{i + 1}} : </b> {{question.question}}
  </div>
  <div class="col-md-10">
   <b> Answer :</b> {{question.answer}}
  </div>
  <div class="col-md-10">
    <b> Option A :</b> {{question.optionA}}
  </div>
  <div class="col-md-10">
    <b>Option B :</b> {{question.optionB}}
  </div>
  <div class="col-md-10">
    <b>Option C :</b> {{question.optionC}}
  </div>
  <div class="col-md-10">
    <b> Option D :</b> {{question.optionD}}
  </div>
  <div class="col-md-10">
    <b>Selected Option :</b> {{question.key}}
  </div>
  <div class="col-md-10">
    <b>  Subject :</b> {{question.subject}}
    </div>
    <div class="col-sm-5">
      <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>
      </div>

   <div class="col-sm-5">
       <edit-question [Question]="question"></edit-question> <!-- inside ngFor context -->

  </div>

</content>

Edit

Access the question variable inside ngAfterViewInit

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

Upvotes: 1

Related Questions