Mark Tabor

Mark Tabor

  • 950
  • 1.3k
  • 172.8k

My Angular Component html is showing half content

Jun 6 2020 2:21 PM
Hi I am following a video series for angular 2 from udemy I am following all things exactly
 
below is my recipe-list-component
  1. <div class="row">  
  2. <div class="col-xs-12">  
  3. <button class="btn btn-success">New Recipebutton>  
  4. </div>  
  5. </div>  
  6. <hr/>  
  7. <div class="row">  
  8. <div class="col-xs-12">  
  9. <a href="#" class="list-group-item clearfix" *ngFor="let recipe of recipes">  
  10. <div class="pull-left">  
  11. <h4 class="list-group-item-heading">{{recipe.name}}</h4>  
  12. <p class="list-group-item-text">{{recipe.description}}</p>  
  13.   
  14. </div>  
  15. <span class="pull-right">  
  16. <img [src]="recipe.imagePath" alt="{{recipe.name}}" class="img-responsive" style="max-height: 50px;">  
  17. </span>a>  
  18. <app-recipe-item>app-recipe-item>  
  19. </div>  
  20. </div>  
it did not show the content of my second row even if i put the static content like instead of recipe.name i type string name even than it is not showing , but it shows the first row data and content .
 
below is my model class
  1. export class Recipe{  
  2. public name:string;  
  3. public description:string;  
  4. public imagePath:string;  
  5. constructor(name:string,desc:string,imagepath:string){  
  6. this.name=name;  
  7. this.description=desc;  
  8. this.imagePath=imagepath;  
  9. }  
  10. }  
and my recipe -list component.ts is below
  1. import { Component, OnInit } from '@angular/core';  
  2. import { Recipe } from '../recipe.model';  
  3.   
  4. @Component({  
  5. selector: 'app-recipe-list',  
  6. templateUrl: './recipe-list.component.html',  
  7. styleUrls: ['./recipe-list.component.css']  
  8. })  
  9. export class RecipeListComponent implements OnInit {  
  10. recipes:Recipe[]=[  
  11. new Recipe('this is test recipe','this is its description','https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_960_720.jpg')  
  12. ];  
  13. constructor() { }  
  14. ngOnInit() {  
  15. }  
  16. }  

Brought to you by: JavaScript SDK for Bold BI dashboard and analytics embedding. Free trial.

Answers (1)