ynter ynter - 1 year ago 97
TypeScript Question

Angular2, code from detail.component.ts not appearing anymore in main app on click

I'm trying to learn Angular2 and I'm following the tutorial on https://angular.io while I'm trying to create something a bit more custom but very basic, click on an image and bigger image gets displayed.
I got to this point https://angular.io/docs/ts/latest/tutorial/toh-pt3.html, where I'm basically setting up the correct file structure but my code that was working fine when it was all in the app.component.ts is now only half working.
This is what I have now in app.component.ts

import { Component } from '@angular/core';

import { Flickr } from './flickr';

const Flickres: Flickr[] = [
{ id: 11, url: 'https://c1.staticflickr.com/9/8501/8300920648_d4a21bba59_n.jpg', urlxl: 'https://c1.staticflickr.com/9/8501/8300920648_56ce4fb10f_k.jpg' },
{ id: 12, url: 'https://c1.staticflickr.com/2/1558/26017368400_dc45fbb364_n.jpg', urlxl: 'https://c1.staticflickr.com/2/1558/26017368400_41dff31fbc_k.jpg' },
{ id: 13, url: 'https://c5.staticflickr.com/4/3781/10901734724_ab15461d13_n.jpg', urlxl: 'https://c5.staticflickr.com/4/3781/10901734724_94ed12297a_k.jpg' },
{ id: 14, url: 'https://c8.staticflickr.com/9/8486/8203155911_f29b9bf344_n.jpg', urlxl: 'https://c8.staticflickr.com/9/8486/8203155911_f29b9bf344_c.jpg' }

selector: 'my-app',
template: `
<h2>My flickres</h2>
<ul class="flickres" >
<li *ngFor="let flickr of flickres" [class.selected]="flickr === selectedFlickr"
<img src="{{flickr.url}}"/>
<my-flickr-detail [flickr]="selectedFlickr">

styles: [`
.flickres {
padding: 0;
.flickres li {
display: inline-block;
width: 25%;
.flickres li img {
width: 100%;
.xl {
width: 100%;
.selected {
opacity: 0.5;

export class AppComponent {
title = 'Flickr images';
flickres = Flickres;
selectedFlickr: Flickr;
onSelect(flickr: Flickr): void {
this.selectedFlickr = flickr;

and this is in my flickr-detail.component.ts

import { Component, Input } from '@angular/core';

import { Flickr } from './flickr';

selector: 'my-flickr-detail',
template: `
<div *ngIf="flickr" >
<img class="xl" src="{{flickr.urlxl}}" />

export class FlickrDetailComponent {
flickr: Flickr;

Basically on the onselect the code with the urlxl (the bigger image) is not getting outputted anymore to the code inside my-flickr-detail and by being new to Angular I'm now stuck to what seems to me a very stupid mistake that I can't figure out.

Hope it makes sense and thanks in advance for any help!

Answer Source

Works fine to me. Here it's a working plunker : http://plnkr.co/edit/8n8QXC2JJvAzrbBJuMjO?p=preview

For future questions like this always create a plunker example, so other will easy can look at your app and also post fixes.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download