[AngularJS] data binding problem with ng-template?

Sampath Tharanga Thu, 02 Aug 2018 11:14:43 -0700


<https://lh3.googleusercontent.com/-DJQIFNYj1KQ/W2KeW-6sR-I/AAAAAAAABdI/jHQNATWbAKkWWxDcypFXG0jM8RGR7ZN_wCLcBGAs/s1600/error.PNG>


Hi guys, 
Please help me solve this problem. How can solve this problem? how can 
parse data  "container " to "ng-template #leftNode". Give me some advice.

html code here
<!-- CONTENT SECTION -->
<div class="container timeline">
   <div class="row" *ngFor="let actress of actresses; odd as odd; even as 
even">
       <!-- NODE 01 | LEFT-->
       <div class="row" *ngIf="odd; then leftNode"></div>

        <!-- NODE 02 | RIGHT-->
       <div class="row" *ngIf="even; then rightNode"></div>
   </div>
   <!-- //row -->
</div>
<!-- //container //timeline -->


<!-- LEFT NODE TEMPLATE -->
<ng-template #leftNode>
   <div class="col-12 col-sm-6  d-flex justify-content-center left">
       <div class="card border-primary">
           <div class="card-header bg-primary text-white">{{ 
actress.presentYear }}</div>
           <div class="card-body">
               <h5 class="card-title">{{ actress.name }}</h5>
               <p class="card-text"> {{ actress.description }}
                   <a class="text-danger" target="_blank" [href]=
"actress.readmoreUrl">read more</a>
               </p>
               <img class="card-img-top" [src]="actress.photoUrl" alt="Card 
image cap" data-toggle="modal" data-target="#node1">

                <!-- POPUP DIALOG -->
               <div class="modal fade" id="node1">
                   <div class="modal-dialog">
                       <div class="modal-content">
                           <!-- MODAL HEADER -->
                           <div class="modal-header">
                               <h4 class="modal-title 
justify-content-center">{{ actress.name }}</h4>
                               <button type="button" class="close" 
data-dismiss="modal">&times;</button>
                           </div>
                           <!-- MODAL BODY -->
                           <div class="modal-body">
                               <img class="card-img-top" [src]=
"actress.photoUrl" alt="Card image cap">
                           </div>
                       </div>
                       <!-- //modal-content -->
                   </div>
                   <!-- //modal-dialog -->
               </div>
               <!-- //modal -->
           </div>
       </div>
       <!-- //card-body -->
   </div>
   <div class="col-sm-6 right d-none d-sm-block"></div>
</ng-template>


<!-- RIGHT NODE TEMPLATE -->
<ng-template #rightNode>
   <div class="col-sm-6 left d-none d-sm-block"></div>
   <div class="col-12 col-sm-6 d-flex justify-content-center right">
       <div class="card border-primary">
           <div class="card-header bg-primary text-white">{{ 
actress.presentYear }}</div>
           <div class="card-body">
               <h5 class="card-title">{{ actress.name }}</h5>
               <p class="card-text"> {{ actress.description }}
                   <a class="text-danger" target="_blank" [href]=
"actress.readmoreUrl">read more</a>
               </p>
               <img class="card-img-top" [src]="actress.photoUrl" alt="Card 
image cap" data-toggle="modal" data-target="#node1">

                <!-- POPUP DIALOG -->
               <div class="modal fade" id="node1">
                   <div class="modal-dialog">
                       <div class="modal-content">
                           <!-- MODAL HEADER -->
                           <div class="modal-header">
                               <h4 class="modal-title 
justify-content-center">{{ actress.name }}</h4>
                               <button type="button" class="close" 
data-dismiss="modal">&times;</button>
                           </div>
                           <!-- MODAL BODY -->
                           <div class="modal-body">
                               <img class="card-img-top" [src]=
"actress.photoUrl" alt="Card image cap">
                           </div>
                       </div>
                       <!-- //modal-content -->
                   </div>
                   <!-- //modal-dialog -->
               </div>
               <!-- //modal -->
           </div>
       </div>
       <!-- //card-body -->
   </div>
</ng-template>

TypeScript code here
import { Component, OnInit } from '@angular/core';

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

  actresses: Object[];
 constructor() {
    this.actresses = [
     {
       classType: "left",
       presentYear: "Tamil Actress | 2013–present",
       name: "Meghali",
       description: "Meghali is an Indian actress who has appeared in Tamil 
cinema . She will make her Tamil debut in P. Vijay's upcoming film ...",
       readmoreUrl: "https://en.wikipedia.org/wiki/Meghali";,
       photoUrl: 
"https://i.pinimg.com/originals/3d/b6/41/3db6412a68e022a4ed39cdd97b43fb93.jpg";
     },
     {
       classType: "left",
       presentYear: "Hindi Actress | 2007–present",
       name: "Meghali",
       description: "Meghali is an Indian actress who has appeared in Tamil 
cinema . She will make her Tamil debut in P. Vijay's upcoming film ...",
       readmoreUrl: "https://en.wikipedia.org/wiki/Meghali";,
       photoUrl: 
"https://i.pinimg.com/originals/61/80/7c/61807c06d3c73d66392f55210ecc1752.jpg";
     },
     {
       classType: "left",
       presentYear: "Tamil Actress | 2013–present",
       name: "Meghali",
       description: "Meghali is an Indian actress who has appeared in Tamil 
cinema . She will make her Tamil debut in P. Vijay's upcoming film ...",
       readmoreUrl: "https://en.wikipedia.org/wiki/Meghali";,
       photoUrl: 
"https://i.pinimg.com/originals/3d/b6/41/3db6412a68e022a4ed39cdd97b43fb93.jpg";
     },
     {
       classType: "left",
       presentYear: "Hindi Actress | 2007–present",
       name: "Meghali",
       description: "Meghali is an Indian actress who has appeared in Tamil 
cinema . She will make her Tamil debut in P. Vijay's upcoming film ...",
       readmoreUrl: "https://en.wikipedia.org/wiki/Meghali";,
       photoUrl: 
"https://i.pinimg.com/originals/61/80/7c/61807c06d3c73d66392f55210ecc1752.jpg";
     },
     {
       classType: "left",
       presentYear: "Tamil Actress | 2013–present",
       name: "Meghali",
       description: "Meghali is an Indian actress who has appeared in Tamil 
cinema . She will make her Tamil debut in P. Vijay's upcoming film ...",
       readmoreUrl: "https://en.wikipedia.org/wiki/Meghali";,
       photoUrl: 
"https://i.pinimg.com/originals/3d/b6/41/3db6412a68e022a4ed39cdd97b43fb93.jpg";
     },
     {
       classType: "left",
       presentYear: "Hindi Actress | 2007–present",
       name: "Meghali",
       description: "Meghali is an Indian actress who has appeared in Tamil 
cinema . She will make her Tamil debut in P. Vijay's upcoming film ...",
       readmoreUrl: "https://en.wikipedia.org/wiki/Meghali";,
       photoUrl: 
"https://i.pinimg.com/originals/61/80/7c/61807c06d3c73d66392f55210ecc1752.jpg";
     }
   ];
  }

   state = true;
 ngOnInit() {
 }

}



Error Here

<https://lh3.googleusercontent.com/-DJQIFNYj1KQ/W2KeW-6sR-I/AAAAAAAABdI/jHQNATWbAKkWWxDcypFXG0jM8RGR7ZN_wCLcBGAs/s1600/error.PNG>

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] data binding problem with ng-template?

Reply via email to