Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

docs(cookbook - item template) Cookbook for a component item template. #1862

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

docs(cookbook - item template) Cookbook for a component item template. #1862

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8f017c9
Cookbook for a component item template.
bennadel Jul 4, 2016
b3a4c19
Attending to Jesus' comments in PR.
bennadel Jul 11, 2016
afbe26f
More updates for PR syntax.
bennadel Jul 11, 2016
95807ff
Jesus' edits
Foxandxss Aug 28, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Attending to Jesus' comments in PR.
  • Loading branch information
@bennadel @Foxandxss
bennadel authored and Foxandxss committed Aug 28, 2016
commit b3a4c190b006952d98d4aaa3b4bc85b928e15522
26 changes: 13 additions & 13 deletions public/docs/_examples/cb-item-template/e2e-spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,31 +10,31 @@ describe('Item template renderer', function () {

it('should toggle the menu', function () {

expect( element( by.className( 'select-items' ) ).isPresent() ).toBe( false );
element( by.className( 'select-root' ) ).click();
expect( element( by.className( 'select-items' ) ).isPresent() ).toBe( true );
element( by.className( 'select-root' ) ).click();
expect( element( by.className( 'select-items' ) ).isPresent() ).toBe( false );
expect(element(by.className('select-items')).isPresent()).toBe(false);
element(by.className('select-root')).click();
expect(element(by.className('select-items')).isPresent()).toBe(true);
element(by.className('select-root')).click();
expect(element(by.className('select-items')).isPresent()).toBe(false);

});

it('should select last item', function () {

// Make sure all menu roots start out with Black.
element.all( by.className( 'select-root' ) ).each(
function iterator( element ) {
expect( element.getText() ).toContain( 'Black' );
element.all(by.className('select-root')).each(
function iterator(element) {
expect(element.getText()).toContain('Black');
}
);

// Select Magenta.
element( by.className( 'select-root' ) ).click();
element.all( by.css( 'ul.select-items li' ) ).last().click();
element(by.className('select-root')).click();
element.all(by.css('ul.select-items li')).last().click();

// Make sure all menu roots reflect selection (since they are sharing same model).
element.all( by.className( 'select-root' ) ).each(
function iterator( element ) {
expect( element.getText() ).toContain( 'Magenta' );
element.all(by.className('select-root')).each(
function iterator(element) {
expect(element.getText()).toContain('Magenta');
}
);

Expand Down
7 changes: 4 additions & 3 deletions public/docs/_examples/cb-item-template/ts/app/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
/* tslint:disable */
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't actually know what that line does. I saw that you added it to one of my other cookbooks:

https://github.com/IdeaBlade/angular.io/blame/master/public/docs/_examples/cb-set-document-title/ts/app/main.ts#L1

... so I just copied it over here as well. Should I remove?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't remember why I did it. I will come back to this.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Foxandxss it looks like if I remove it I get:

[08:46:47] [gulp-tslint] error cb-item-template/ts/app/main.ts[6, 9]: function invocation disallowed: console.info
[08:46:57] 'lint' errored after 18 s
[08:46:57] Error in plugin 'gulp-tslint'

// #docregion
import { bootstrap } from '@angular/platform-browser-dynamic';

import { AppComponent } from './app.component';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Put this in a new line, to separate angular imports from app imports.


bootstrap(AppComponent).then(
() => window.console.info( 'Angular finished bootstrapping your application!' ),
() => window.console.info('Angular finished bootstrapping your application!'),
(error) => {
console.warn( 'Angular was not able to bootstrap your application.' );
console.error( error );
console.warn('Angular was not able to bootstrap your application.');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are we using console.warn in other examples as well? If not I would get rid of it.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are not really doing the .then on any other example.

console.error(error);
}
);
30 changes: 16 additions & 14 deletions public/docs/_examples/cb-item-template/ts/app/simple-select.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
// #docplaster
// #docregion
import { Component } from '@angular/core';
import { ContentChild } from '@angular/core';
import { EventEmitter } from '@angular/core';
import { Input } from '@angular/core';
import { Output } from '@angular/core';
import { TemplateRef } from '@angular/core';
import {
Component,
ContentChild,
EventEmitter,
Input,
Output,
TemplateRef
} from '@angular/core';

interface ItemContext {
item: any;
Expand Down Expand Up @@ -58,26 +60,26 @@ export class SimpleSelectComponent {

// #docregion setters
@Input()
set template( newTemplate: TemplateRef<ItemContext> ) {
if ( newTemplate ) {
set template(newTemplate: TemplateRef<ItemContext>) {
if (newTemplate) {
this.itemTemplateRef = newTemplate;
}
}

@ContentChild( TemplateRef )
set contentChildTemplateRef( newTemplate: TemplateRef<ItemContext> ) {
if ( newTemplate ) {
@ContentChild(TemplateRef)
set contentChildTemplateRef(newTemplate: TemplateRef<ItemContext>) {
if (newTemplate) {
this.itemTemplateRef = newTemplate;
}
}
// #enddocregion setters

public selectItem( item: any ): void {
this.valueChange.emit( item );
public selectItem(item: any) {
this.valueChange.emit(item);
this.toggleItems();
}

public toggleItems(): void {
public toggleItems() {
this.isShowingItems = ! this.isShowingItems;
}

Expand Down
2 changes: 1 addition & 1 deletion public/docs/_examples/cb-item-template/ts/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
<script src='systemjs.config.js'></script>
<script>
System.import('app')
.then(function() { console.info( 'System.js loaded your application module.' )})
.then(function() { console.info('System.js loaded your application module.')})
.catch(function(err){ console.error(err); });
</script>
</head>
Expand Down
2 changes: 1 addition & 1 deletion public/docs/ts/latest/cookbook/item-template.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ code-example(format='')
component template.

figure.image-display
img(src="/resources/images/cookbooks/item-template/item-template-animation.gif" alt="Item Template")
img(src='/resources/images/cookbooks/item-template/item-template-animation.gif' alt='Item Template')

:marked
The complete code:
Expand Down