Skip to content

Commit 56d8d18

Browse files
aldorn-cgaldorn-cg
committed
make data binding readable
1 parent 12c64fb commit 56d8d18

File tree

1 file changed

+102
-91
lines changed

1 file changed

+102
-91
lines changed

‎ng-data-binding/index.html‎

Lines changed: 102 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,15 @@
1616

1717
<!-- Theme used for syntax highlighting of code -->
1818
<link rel="stylesheet" href="../common/css/github-gist.css">
19-
19+
<style>
20+
.container{
21+
display: flex;
22+
}
23+
.col{
24+
flex: 1;
25+
margin: 5px 20px;
26+
}
27+
</style>
2028
</head>
2129
<body>
2230
<section class="angular-link">
@@ -58,130 +66,133 @@ <h2>Interpolation</h2>
5866
<img class="reset" src="img/property-binding.png">
5967
<h2>Property Binding</h2>
6068
</div>
61-
<pre class="width-100-percent"><code class="hljs html" data-trim data-noescape>
62-
&lt;ul&gt;
63-
&lt;li (click)="selectBook(firstBook)">{{ firstBook.title }}&lt;/li&gt;
64-
&lt;li (click)="selectBook(secondBook)">{{ secondBook.title }}&lt;/li&gt;
65-
&lt;/ul&gt;
66-
&lt;book-entry <mark>[book]="selectedBook"</mark>&gt;&lt;/book-entry &gt;
67-
</code></pre>
68-
<pre class="width-100-percent"><code class="hljs typescript" data-trim data-noescape>
69-
@Component(...)
70-
export class BookOverviewComponent {
71-
firstBook = new Book(...);
72-
secondBook = new Book(...);
73-
<mark>selectedBook</mark>: Book|null = null;
69+
<div style="margin-left:-200px;" class="container">
70+
<div class="col">
71+
<pre class="width-100-percent"><code class="hljs html" data-trim data-noescape>
72+
&lt;!-- BookOverviewComponent (Parent) --&gt;
73+
&lt;ul&gt;
74+
&lt;li (click)="selectBook(firstBook)">{{ firstBook.title }}&lt;/li&gt;
75+
&lt;li (click)="selectBook(secondBook)">{{ secondBook.title }}&lt;/li&gt;
76+
&lt;/ul&gt;
77+
&lt;book-entry <mark>[book]="selectedBook"</mark>&gt;&lt;/book-entry&gt;
78+
</code></pre>
79+
<pre class="width-100-percent"><code class="hljs typescript" data-trim data-noescape>
80+
@Component(...)
81+
export class BookOverviewComponent {
82+
firstBook = new Book(...);
83+
secondBook = new Book(...);
84+
<mark>selectedBook</mark>: Book|null = null;
7485

75-
selectBook(book:Book):void {
76-
this.selectedBook = book;
77-
}
78-
}
79-
</code></pre>
86+
selectBook(book:Book):void {
87+
this.selectedBook = book;
88+
}
89+
}
90+
</code></pre>
91+
</div>
92+
<div class="col">
93+
<pre class="width-100-percent"><code class="hljs html" data-trim data-noescape >
94+
&lt;!-- BookDetailsComponent (Child) --&gt;
95+
&lt;div&gt;Title: {{ <mark>book</mark>?.title }}&lt;/div&gt;
96+
&lt;div&gt;Author: {{ <mark>book</mark>?.author }}&lt;/div&gt;
97+
</code></pre>
98+
<pre class="width-100-percent"><code class="hljs typescript" data-trim data-noescape>
99+
@Component(...)
100+
export class BookEntryComponent {
101+
<mark>@Input() book: Book|null;</mark>
102+
}
103+
</code></pre>
104+
105+
</div>
106+
</div>
80107

81108
<a href="https://angular.io/guide/property-binding" class="references" target="_blank">Angular Docs</a>
82109
<aside class="notes">
110+
To define a property we add the Input() decorator to the field of a class<br>
111+
The name of the property is defined through the name of the field<br>
112+
The operator in book?.author is for optional property access. So we don't get an error if book is null<br><br>
113+
83114
With property bindings data is passed from parent to child component<br>
84115
Property bindings are always surrounded by [] brackets<br>
85116
The left side of the = is the name of the property as defined by the child.<br>
86117
The right side of the = is the name of the parent component's field to pass to the child.<br>
87118
</aside>
88119
</section>
89-
<section>
120+
<section>
90121
<div class="title-with-image">
91122
<img class="reset" src="img/property-binding.png">
92123
<h2>Property Binding</h2>
93-
<img class="small-img" src="img/property.svg">
94124
</div>
95-
<pre class="width-100-percent"><code class="hljs html" data-trim data-noescape>
96-
&lt;ul&gt;
97-
&lt;li (click)="selectBook(firstBook)">{{ firstBook.title }}&lt;/li&gt;
98-
&lt;li (click)="selectBook(secondBook)">{{ secondBook.title }}&lt;/li&gt;
99-
&lt;/ul&gt;
100-
&lt;book-entry <mark>[book]</mark>="selectedBook"&gt;&lt;/book-entry &gt;
101-
</code></pre>
102-
103-
<pre class="width-100-percent"><code class="hljs typescript" data-trim data-noescape>
104-
@Component(...)
105-
export class BookEntryComponent {
106-
<mark>@Input() book: Book|null;</mark>
107-
}
108-
</code></pre>
109-
<pre class="width-100-percent"><code class="hljs html" data-trim data-noescape>
110-
&lt;div&gt;Title: {{ <mark>book</mark>?.title }}&lt;/div&gt;
111-
&lt;div&gt;Author: {{ <mark>book</mark>?.author }}&lt;/div&gt;
112-
</code></pre>
113-
<a href="https://angular.io/guide/property-binding" class="references" target="_blank">Angular Docs</a>
114-
<aside class="notes">
115-
To define a property we add the Input() decorator to the field of a class<br>
116-
The name of the property is defined through the name of the field<br>
117-
The operator in book?.author is for optional property access. So we don't get an error if book is null
118-
</aside>
125+
<img src="img/property.svg">
126+
<p><a href="https://v17.angular.io/guide/inputs-outputs" class="references" target="_blank">Angular Docs</a></p>
119127
</section>
120128
<section>
121129
<div class="title-with-image">
122130
<img class="reset" src="img/event-binding.png">
123131
<h2>Event Binding</h2>
124132
</div>
125-
<pre class="width-100-percent"><code class="hljs html" data-trim data-noescape>
126-
&lt;book-entry [currentBook]="books[0]"
127-
(selectBook)=<mark>"rentBook($event)"</mark>&gt;
128-
&lt;/book-entry&gt;
129-
&lt;book-entry [currentBook]="books[1]"
130-
(selectBook)=<mark>"rentBook($event)"</mark>&gt;
131-
&lt;/book-entry&gt;
132-
</code></pre>
133-
<pre class="width-100-percent"><code class="hljs typescript" data-trim data-noescape>
134-
@Component(...)
135-
export class BookOverviewComponent {
136-
books = [new Book(...), new Book(...)];
137-
rentedBook: Book|null = null;
133+
<div style="margin-left:-200px;" class="container">
134+
<div class="col">
135+
<pre class="width-100-percent"><code class="hljs html" data-trim data-noescape>
136+
&lt;!-- BookOverviewComponent (Parent) --&gt;
137+
&lt;book-entry [currentBook]="books[0]"
138+
(selectBook)=<mark>"rentBook($event)"</mark>&gt;
139+
&lt;/book-entry&gt;
140+
&lt;book-entry [currentBook]="books[1]"
141+
(selectBook)=<mark>"rentBook($event)"</mark>&gt;
142+
&lt;/book-entry&gt;
143+
</code></pre>
144+
<pre class="width-100-percent"><code class="hljs typescript" data-trim data-noescape>
145+
@Component(...)
146+
export class BookOverviewComponent {
147+
books = [new Book(...), new Book(...)];
148+
rentedBook: Book|null = null;
138149

139-
<mark>rentBook(book: Book)</mark> {
140-
this.rentedBook = book;
141-
}
142-
}
143-
</code></pre>
150+
<mark>rentBook(book: Book)</mark> {
151+
this.rentedBook = book;
152+
}
153+
}
154+
</code></pre>
155+
</div>
156+
<div class="col">
157+
<pre class="width-100-percent"><code class="hljs html" data-trim data-noescape>
158+
&lt;!-- BookDetailsComponent (Child) --&gt;
159+
&lt;div&gt;Book title: {{ currentBook.title }}&lt;/div&gt;
160+
&lt;button (click)="onSelectBtnClick()"&gt;Rent the book&lt;/button&gt;
161+
</code></pre>
162+
<pre class="width-100-percent"><code class="max-height-unset typescript" data-trim data-noescape>
163+
@Component(...)
164+
export class BookEntryComponent {
165+
@Input() currentBook: Book;
166+
<mark>@Output() selectBook = new EventEmitter&lt;Book&gt;();</mark>
167+
168+
onSelectBtnClick(): void {
169+
this.selectBook.emit(this.currentBook);
170+
}
171+
}
172+
</code></pre>
173+
</div>
174+
</div>
144175
<a href="https://angular.io/guide/event-binding" class="references" target="_blank">Angular Docs</a>
145176
<aside class="notes">
146177
With event bindings data is passed from child to parent component<br>
147178
Event bindings are always surrounded by () brackets<br>
148179
The left side of the = is the name of the event as defined by the child.<br>
149180
The right side of the = is the name of the parent component's method to handle the event.<br>
150-
$event is a keyword to pass the events payload as method param
181+
$event is a keyword to pass the events payload as method param<br><br>
182+
183+
To define an event we add the Output() decorator to a field of a class<br>
184+
The name of the event is defined through the name of the field<br>
185+
We assign a EventEmitter to the field. On this EventEmitter we can call emit() to trigger the event.
186+
EventEmitter can be parametrized to determine the type of the event's payload.
151187
</aside>
152188
</section>
153189
<section>
154190
<div class="title-with-image">
155191
<img class="reset" src="img/event-binding.png">
156192
<h2>Event Binding</h2>
157-
<img class="small-img" src="img/event.svg">
158193
</div>
159-
<pre class="width-100-percent"><code class="hljs html" data-trim data-noescape>
160-
&lt;book-entry [currentBook]="books[0]"
161-
<mark>(selectBook)="rentBook($event)"</mark>&gt;&lt;/book-entry&gt;
162-
</code></pre>
163-
<pre class="width-100-percent"><code class="max-height-unset typescript" data-trim data-noescape>
164-
@Component(...)
165-
export class BookEntryComponent {
166-
@Input() currentBook: Book;
167-
<mark>@Output() selectBook = new EventEmitter&lt;Book&gt;();</mark>
168-
169-
onSelectBtnClick(): void {
170-
this.selectBook.emit(this.currentBook);
171-
}
172-
}
173-
</code></pre>
174-
<pre class="width-100-percent"><code class="hljs html" data-trim data-noescape>
175-
&lt;div&gt;Book title: {{ currentBook.title }}&lt;/div&gt;
176-
&lt;button (click)="onSelectBtnClick()"&gt;Rent the book&lt;/button&gt;
177-
</code></pre>
178-
<a href="https://angular.io/guide/event-binding" class="references" target="_blank">Angular Docs</a>
179-
<aside class="notes">
180-
To define an event we add the Output() decorator to a field of a class<br>
181-
The name of the event is defined through the name of the field<br>
182-
We assign a EventEmitter to the field. On this EventEmitter we can call emit() to trigger the event.
183-
EventEmitter can be parametrized to determine the type of the event's payload.
184-
</aside>
194+
<img src="img/event.svg">
195+
<p><a href="https://v17.angular.io/guide/inputs-outputs" class="references" target="_blank">Angular Docs</a></p>
185196
</section>
186197
<section>
187198
<h4>Input (Data) and Output (Event) Binding</h4>

0 commit comments

Comments
 (0)