Add other Angular docs and translate title & tags only

5 files changed, 1278 insertions, 0 deletions

diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_building/index.html b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_building/index.html
new file mode 100644
index 0000000000..69954c77dc
--- /dev/null
+++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_building/index.html
@@ -0,0 +1,144 @@
+---
+title: 建構 Angular 應用程式與更多資源
+slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building
+tags:
+  - 初學者
+  - 框架
+  - 安裝
+  - 學習
+  - 用戶端
+  - 建構
+  - 資源
+  - Beginner
+  - Frameworks
+  - JavaScript
+  - Learn
+  - client-side
+  - Angular
+  - Building
+  - Resources
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div>
+
+<p>This final Angular article covers how to build an app ready for production, and provides further resources for you to continue your learning journey.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">預備知識：</th>
+   <td>Familiarity with the core <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages, knowledge of the <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">terminal/command line</a>.
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">學習目標：</th>
+   <td>To learn how to build your Angular app.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="building_your_finished_application">Building your finished application</h2>
+
+<p>Now that you are finished developing your application, you can run the Angular CLI <code>build</code> command.
+When you run the <code>build</code> command in your <code>todo</code> directory, your application compiles into an output directory named <code>dist/</code>.</p>
+
+<p>In the <code>todo</code> directory, run the following command at the command line:</p>
+
+<pre class="brush: bash">ng  build --prod</pre>
+
+<p>The CLI compiles the application and puts the output in a new <code>dist</code> directory.
+The <code>--prod</code> flag with <code>ng build</code> gets rid of stuff you don&#39;t need for production.</p>
+
+<h2 id="deploying_your_application">Deploying your application</h2>
+
+<p>To deploy your application, you can copy the contents of the <code>dist/my-project-name</code> folder to your web server.
+Because these files are static, you can host them on any web server capable of serving files, such as:</p>
+
+<ul>
+  <li>Node.js</li>
+  <li>Java</li>
+  <li>.NET</li>
+</ul>
+
+<p>You can use any backend such as <a href="https://firebase.google.com/docs/hosting">Firebase</a>, <a href="https://cloud.google.com/solutions/web-hosting">Google Cloud</a>, or <a href="https://cloud.google.com/appengine/docs/standard/python/getting-started/hosting-a-static-website">App Engine</a>.</p>
+
+<h2 id="whats_next">What's next</h2>
+
+<p>At this point, you&#39;ve built a basic application, but your Angular journey is just beginning.
+You can learn more by exploring the Angular documentation, such as:</p>
+
+<ul>
+  <li><a href="https://angular.io/tutorial">Tour of Heroes</a>: An in-depth tutorial highlighting Angular features, such as using services, navigation, and getting data from a server.</li>
+  <li>The Angular <a href="https://angular.io/guide/component-overview">Components</a> guides: A series of articles that cover topics such as lifecycle, component interaction, and view encapsulation.</li>
+  <li>The <a href="https://angular.io/guide/forms-overview">Forms</a> guides: Articles that guide you through building reactive forms in Angular, validating input, and building dynamic forms.</li>
+</ul>
+
+<h2 id="summary">Summary</h2>
+
+<p>That's it for now. We hope you had fun with Angular!</p>
+
+<div>{{PreviousMenu("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li>
+ <li>React
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li>
+  </ul>
+ </li>
+ <li>Ember
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li>
+  </ul>
+ </li>
+ <li>Vue
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li>
+  </ul>
+ </li>
+ <li>Svelte
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Getting started with Svelte</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starting our Svelte Todo list app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamic behavior in Svelte: working with variables and props</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Componentizing our Svelte app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Working with Svelte stores</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript support in Svelte</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Deployment and next steps</a></li>
+  </ul>
+ </li>
+ <li>Angular
+   <ul>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started">Getting started with Angular</a></li>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning">Beginning our Angular todo list app</a></li>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling">Styling our Angular app</a></li>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component">Creating an item component</a></li>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering">Filtering our to-do items</a></li>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building">Building Angular applications and further resources</a></li>
+   </ul>
+ </li>
+</ul>
diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_filtering/index.html b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_filtering/index.html
new file mode 100644
index 0000000000..bfc15c91b1
--- /dev/null
+++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_filtering/index.html
@@ -0,0 +1,163 @@
+---
+title: 篩選我們的待辦事項項目
+slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering
+tags:
+  - 初學者
+  - 框架
+  - 安裝
+  - 學習
+  - 用戶端
+  - 篩選
+  - Beginner
+  - Frameworks
+  - JavaScript
+  - Learn
+  - client-side
+  - Angular
+  - Filtering
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div>
+
+<p>Now let's move on to adding functionality to allow users to filter their to-do items, so they can view active, completed, or all items.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">預備知識：</th>
+   <td>Familiarity with the core <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages, knowledge of the <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">terminal/command line</a>.
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">學習目標：</th>
+   <td>To add filtering functionality to our app.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="our_filtering_code">Our filtering code</h2>
+
+<p>Filtering items builds on the <code>filter</code> property, which you previously added to <code>app.component.ts</code>:</p>
+
+<pre class="brush: js">filter: 'all' | 'active' | 'done' = 'all';</pre>
+
+<p>The default value for filter is <code>all</code>, but it can also be <code>active</code> or <code>done</code>.</p>
+
+<h2 id="adding_filter_controls">Adding filter controls</h2>
+
+<p>In <code>app.component.html</code>, add the following HTML before the <strong>Add</strong> button but above the  section that lists the items.
+In the following snippet, the existing sections in your HTML are in comments so you can see exactly where to put the buttons.</p>
+
+<pre class="brush: html">&lt;!-- &lt;button class="btn-primary" (click)="addItem(newItem.value)"&gt;Add&lt;/button&gt;
+ --&gt;
+
+  &lt;!-- Buttons that show all, still to do, or done items on click --&gt;
+  &lt;div class="btn-wrapper"&gt;
+    &lt;button
+      class="btn btn-menu"
+      [class.active]="filter == 'all'"
+      (click)="filter = 'all'"&gt;
+      All
+    &lt;/button&gt;
+
+    &lt;button
+      class="btn btn-menu"
+      [class.active]="filter == 'active'"
+      (click)="filter = 'active'"&gt;
+      To Do
+    &lt;/button&gt;
+
+    &lt;button
+      class="btn btn-menu"
+      [class.active]="filter == 'done'"
+      (click)="filter = 'done'"&gt;
+      Done
+    &lt;/button&gt;
+  &lt;/div&gt;
+
+  &lt;!-- &lt;h2&gt;\{{items.length}} item(s)&lt;/h2&gt;
+        &lt;ul&gt;... --&gt;</pre>
+
+<p>Clicking the buttons changes the <code>filter</code> values, which determines the <code>items</code> that show as well as the styles that Angular applies to the active button.</p>
+
+<ul>
+  <li>If the user clicks the <strong>All</strong> button, all of the items show.</li>
+  <li>If the user clicks the <strong>To do</strong> button, only the items with a <code>done</code> value of <code>false</code> show.</li>
+  <li>If the user clicks the <strong>Done</strong> button, only the items with a <code>done</code> value of <code>true</code> show.</li>
+</ul>
+
+<p>A class attribute binding, using square brackets, <code>[]</code>, controls the text color of the buttons.
+The class binding, <code>[class.active]</code>, applies the <code>active</code> class when the value of <code>filter</code> matches the expression.
+For example, when the user clicks the <strong>Done</strong> button, which sets the <code>filter</code> value to <code>done</code>, the class binding expression of <code>filter == &#39;done&#39;</code> evaluates to <code>true</code>.
+When the <code>filter</code> value is <code>done</code>, Angular applies the <code>active</code> class to the <strong>Done</strong> button to make the text color green.
+As soon as the user clicks on one of the other buttons, the value a <code>filter</code> is no longer <code>done</code>, so the green text color no longer applies.</p>
+
+<h2 id="summary">Summary</h2>
+
+<p>That was quick! Since you already had the <code>filter</code> code in <code>app.component.ts</code>, all you had to do was edit the template in order to provide controls for filtering the items. Our next — and last — article looks at how to build your Angular app ready for production, and provides further resources to carry on your learning journey.</p>
+
+<div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li>
+ <li>React
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li>
+  </ul>
+ </li>
+ <li>Ember
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li>
+  </ul>
+ </li>
+ <li>Vue
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li>
+  </ul>
+ </li>
+ <li>Svelte
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Getting started with Svelte</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starting our Svelte Todo list app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamic behavior in Svelte: working with variables and props</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Componentizing our Svelte app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Working with Svelte stores</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript support in Svelte</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Deployment and next steps</a></li>
+  </ul>
+ </li>
+ <li>Angular
+   <ul>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started">Getting started with Angular</a></li>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning">Beginning our Angular todo list app</a></li>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling">Styling our Angular app</a></li>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component">Creating an item component</a></li>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering">Filtering our to-do items</a></li>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building">Building Angular applications and further resources</a></li>
+   </ul>
+ </li>
+</ul>
diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_item_component/index.html b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_item_component/index.html
new file mode 100644
index 0000000000..dae9fe34cb
--- /dev/null
+++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_item_component/index.html
@@ -0,0 +1,446 @@
+---
+title: 建立一個 item 元件
+slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component
+tags:
+  - 初學者
+  - 框架
+  - 安裝
+  - 學習
+  - 用戶端
+  - 元件
+  - 事件
+  - 資料
+  - Beginner
+  - Frameworks
+  - JavaScript
+  - Learn
+  - client-side
+  - Angular
+  - Components
+  - Events
+  - Data
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div>
+
+<p>Components provide a way for you to organize your application. This article walks you through creating a component to handle the individual items in the list, and adding check, edit, and delete functionality. the Angular event model is covered here.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">預備知識：</th>
+   <td>Familiarity with the core <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages, knowledge of the <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">terminal/command line</a>.
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">學習目標：</th>
+   <td>To learn more about components, including how events work to handle updates. To add check, edit, and delete functionality. </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="creating_the_new_component">Creating the new component</h2>
+
+<p>At the command line, create a component named <code>item</code> with the following CLI command:</p>
+
+<pre class="brush: bash">ng generate component item</pre>
+
+<p>The <code>ng generate component</code> command creates a component and folder with the name you specify.
+Here, the folder and component name is <code>item</code>.
+You can find the <code>item</code> directory within the <code>app</code> folder.</p>
+
+<p>Just as with the <code>AppComponent</code>, the <code>ItemComponent</code> is made up of the following files:</p>
+
+<ul>
+  <li><code>item.component.html</code> for HTML</li>
+  <li><code>item.component.ts</code> for logic</li>
+  <li><code>item.component.css</code> for styles</li>
+</ul>
+
+<p>You can see a reference to the HTML and CSS files in the <code>@Component()</code> decorator metadata in <code>item.component.ts</code>.</p>
+
+<pre class="brush: js">@Component({
+  selector: 'app-item',
+  templateUrl: './item.component.html',
+  styleUrls: ['./item.component.css'],
+})</pre>
+
+<h2 id="add_html_for_the_itemcomponent-">Add HTML for the ItemComponent</h2>
+
+<p>The <code>ItemComponent</code> can take over the task of giving the user a way to check items off as done, edit them, or delete them.</p>
+
+<p>Add markup for managing items by replacing the placeholder content in <code>item.component.html</code> with the following:</p>
+
+<pre class="brush: html">&lt;div class="item"&gt;
+
+  &lt;input [id]="item.description" type="checkbox" (change)="item.done = !item.done" [checked]="item.done" /&gt;
+  &lt;label [for]="item.description"&gt;\{{item.description}}&lt;/label&gt;
+
+  &lt;div class="btn-wrapper" *ngIf="!editable"&gt;
+    &lt;button class="btn" (click)="editable = !editable"&gt;Edit&lt;/button&gt;
+    &lt;button class="btn btn-warn" (click)="remove.emit()"&gt;Delete&lt;/button&gt;
+  &lt;/div&gt;
+
+  &lt;!-- This section shows only if user clicks Edit button --&gt;
+  &lt;div *ngIf="editable"&gt;
+    &lt;input class="sm-text-input" placeholder="edit item" [value]="item.description" #editedItem (keyup.enter)="saveItem(editedItem.value)"&gt;
+
+    &lt;div class="btn-wrapper"&gt;
+      &lt;button class="btn" (click)="editable = !editable"&gt;Cancel&lt;/button&gt;
+      &lt;button class="btn btn-save" (click)="saveItem(editedItem.value)"&gt;Save&lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+
+&lt;/div&gt;</pre>
+
+<p>The first input is a checkbox so users can check off items when an item is complete.
+The double curly braces, <code>\{{}}</code>, in the <code>&lt;input&gt;</code> and <code>&lt;label&gt;</code> for the checkbox signifies Angular&#39;s interpolation.
+Angular uses <code>\{{item.description}}</code> to retrieve the description of the current <code>item</code> from the <code>items</code> array.
+The next section explains how components share data in detail.</p>
+
+<p>The next two buttons for editing and deleting the current item are within a <code>&lt;div&gt;</code>.
+On this <code>&lt;div&gt;</code> is an <code>*ngIf</code>, a built-in Angular directive that you can use to dynamically change the structure of the DOM.</p>
+
+<p>This <code>*ngIf</code> means that if <code>editable</code> is <code>false</code>, this <code>&lt;div&gt;</code> is in the DOM. If <code>editable</code> is <code>true</code>, Angular removes this <code>&lt;div&gt;</code> from the DOM.</p>
+
+<pre class="brush: html">&lt;div class="btn-wrapper" *ngIf="!editable"&gt;
+  &lt;button class="btn" (click)="editable = !editable"&gt;Edit&lt;/button&gt;
+  &lt;button class="btn btn-warn" (click)="remove.emit()"&gt;Delete&lt;/button&gt;
+&lt;/div&gt;</pre>
+
+<p>When a user clicks the <strong>Edit</strong> button, <code>editable</code> becomes true, which removes this <code>&lt;div&gt;</code> and its children from the DOM.
+If, instead of clicking <strong>Edit</strong>, a user clicks <strong>Delete</strong>, the <code>ItemComponent</code> raises an event that notifies the <code>AppComponent</code> of the deletion.</p>
+
+<p>An <code>*ngIf</code> is also on the next <code>&lt;div&gt;</code>, but is set to an <code>editable</code> value of <code>true</code>.
+In this case, if <code>editable</code> is <code>true</code>, Angular puts the <code>&lt;div&gt;</code> and its child <code>&lt;input&gt;</code> and <code>&lt;button&gt;</code> elements in the DOM.</p>
+
+<pre class="brush: html">&lt;!-- This section shows only if user clicks Edit button --&gt;
+&lt;div *ngIf="editable"&gt;
+  &lt;input class="sm-text-input" placeholder="edit item" [value]="item.description" #editedItem (keyup.enter)="saveItem(editedItem.value)"&gt;
+
+  &lt;div class="btn-wrapper"&gt;
+    &lt;button class="btn" (click)="editable = !editable"&gt;Cancel&lt;/button&gt;
+    &lt;button class="btn btn-save" (click)="saveItem(editedItem.value)"&gt;Save&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>With <code>[value]=&quot;item.description&quot;</code>, the value of the <code>&lt;input&gt;</code> is bound to the <code>description</code> of the current item.
+This binding makes the item&#39;s <code>description</code> the value of the <code>&lt;input&gt;</code>.
+So if the <code>description</code> is <code>eat</code>, the <code>description</code> is already in the <code>&lt;input&gt;</code>.
+This way, when the user edits the item, the value of the <code>&lt;input&gt;</code> is already <code>eat</code>.</p>
+
+<p>The template variable, <code>#editedItem</code>, on the <code>&lt;input&gt;</code> means that Angular stores whatever a user types in this <code>&lt;input&gt;</code> in a variable called <code>editedItem</code>.
+The <code>keyup</code> event calls the <code>saveItem()</code> method and passes in the <code>editedItem</code> value if the user chooses to press enter instead of click <strong>Save</strong>.</p>
+
+<p>When a user clicks the <strong>Cancel</strong> button, <code>editable</code> toggles to <code>false</code>, which removes the input and buttons for editing from the DOM.
+When <code>editable</code> is <code>false</code>, Angular puts <code>&lt;div&gt;</code> with the <strong>Edit</strong> and <strong>Delete</strong> buttons back in the DOM.</p>
+
+<p>Clicking the <strong>Save</strong> button calls the <code>saveItem()</code> method.
+The <code>saveItem()</code> method takes the value from the <code>#editedItem</code> <code>&lt;input&gt;</code> and changes the item&#39;s <code>description</code> to <code>editedItem.value</code> string.</p>
+
+<h2 id="prepare_the_appcomponent">Prepare the AppComponent</h2>
+
+<p>In the next section, you will add code that relies on communication the <code>AppComponent</code> and the <code>ItemComponent</code>.
+Configure the AppComponent first by adding the following to <code>app.component.ts</code>:</p>
+
+<pre class="brush: js">remove(item) {
+  this.allItems.splice(this.allItems.indexOf(item), 1);
+}</pre>
+
+<p>The <code>remove()</code> method uses the JavaScript <code>Array.splice()</code> method to remove one item at at the <code>indexOf</code> the relevant item.
+In plain English, this means that the <code>splice()</code> method removes the item from the array.
+For more information on the <code>splice()</code> method, see the MDN Web Docs article on <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice"><code>Array.prototype.splice()</code></a>.</p>
+
+<h2 id="add_logic_to_itemcomponent-">Add logic to ItemComponent</h2>
+
+<p>To use the <code>ItemComponent</code> UI, you must add logic to the component such as functions, and ways for data to go in and out.</p>
+
+<p>In <code>item.component.ts</code>, edit the JavaScript imports as follows:</p>
+
+<pre class="brush: js">import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Item } from "../item";</pre>
+
+<p>The addition of <code>Input</code>, <code>Output</code>, and <code>EventEmitter</code> allows <code>ItemComponent</code> to share data with <code>AppComponent</code>.
+By importing <code>Item</code>, <code>ItemComponent</code> can understand what an <code>item</code> is.</p>
+<p>Further down <code>item.component.ts</code>, replace the generated <code>ItemComponent</code> class with the following:</p>
+
+<pre class="brush: js">export class ItemComponent {
+
+  editable = false;
+
+  @Input() item: Item;
+  @Input() newItem: string;
+  @Output() remove = new EventEmitter&lt;Item&gt;();
+
+  saveItem(description) {
+    if (!description) return;
+    this.editable = false;
+    this.item.description = description;
+  }
+}</pre>
+
+<p>The <code>editable</code> property helps toggle a section of the template where a user can edit an item.
+<code>editable</code> is the same property in the HTML as in the <code>*ngIf</code> statement, <code>*ngIf=&quot;editable&quot;</code>.
+When you use a property in the template, you must also declare it in the class.</p>
+
+<p><code>@Input()</code>, <code>@Output()</code>, and <code>EventEmitter</code> facilitate communication between your two components.
+An <code>@Input()</code> serves as a doorway for data to come into the component, and an <code>@Output()</code> acts as a doorway for data to go out of the component.
+An <code>@Output()</code> has to be of type <code>EventEmitter</code>, so that a component can raise an event when there&#39;s data ready to share with another component.</p>
+
+<p>Use <code>@Input()</code> to specify that the value of a property can come from outside of the component.
+Use <code>@Output()</code> in conjunction with <code>EventEmitter</code> to specify that the value of a property can leave the component so that another component can receive that data.</p>
+
+<p>The <code>saveItem()</code> method takes as an argument a <code>description</code>.
+The <code>description</code> is the text that the user enters into the HTML <code>&lt;input&gt;</code> when editing an item in the list.
+This <code>description</code> is the same string from the <code>&lt;input&gt;</code> with the <code>#editedItem</code> template variable.</p>
+
+<p>If the user doesn&#39;t enter a value but clicks <strong>Save</strong>, <code>saveItem()</code> returns nothing and does not update the <code>description</code>.
+If you didn&#39;t have this <code>if</code> statement, the user could click <strong>Save</strong> with nothing in the HTML <code>&lt;input&gt;</code>, and the <code>description</code> would become an empty string.</p>
+
+<p>If a user enters text and clicks save, <code>saveItem()</code> sets <code>editable</code> to false, which causes the <code>*ngIf</code> in the template to remove the edit feature and render the <strong>Edit</strong> and <strong>Delete</strong> buttons again.</p>
+
+<p>Though the application should compile at this point, you need to use the <code>ItemComponent</code> in <code>AppComponent</code> so you can see the new features in the browser.</p>
+
+<h2 id="use_the_itemcomponent_in_the_appcomponent">Use the ItemComponent in the AppComponent</h2>
+
+<p>Including one component within another in the context of a parent-child relationship gives you the flexibility of using components wherever you need them.</p>
+
+<p>The <code>AppComponent</code> serves as a shell for the application where you can include other components.</p>
+
+<p>To use the <code>ItemComponent</code> in <code>AppComponent</code>, put the <code>ItemComponent</code> selector in the <code>AppComponent</code> template.
+Angular specifies the selector of a component in the metadata of the <code>@Component()</code> decorator.
+In this example, the selector is <code>app-item</code>:</p>
+
+<pre class="brush: js">@Component({
+  selector: 'app-item',
+  templateUrl: './item.component.html',
+  styleUrls: ['./item.component.css']
+})</pre>
+
+<p>To use the <code>ItemComponent</code> selector within the <code>AppComponent</code>, you add the element, <code>&lt;app-item&gt;</code>, which corresponds to the selector you defined for the component class to <code>app.component.html</code>.
+Replace the current unordered list in <code>app.component.html</code> with the following updated version:</p>
+
+<pre class="brush: html">&lt;h2&gt;\{{items.length}} &lt;span *ngIf="items.length === 1; else elseBlock"&gt;item&lt;/span&gt;
+&lt;ng-template #elseBlock&gt;items&lt;/ng-template&gt;&lt;/h2&gt;
+
+&lt;ul&gt;
+  &lt;li *ngFor="let item of items"&gt;
+    &lt;app-item (remove)="remove(item)" [item]="item"&gt;&lt;/app-item&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>The double curly brace syntax, <code>\{{}}</code>, in the <code>&lt;h2&gt;</code> interpolates the length of the <code>items</code> array and displays the number.</p>
+
+<p>The <code>&lt;span&gt;</code> in the <code>&lt;h2&gt;</code> uses an <code>*ngIf</code> and <code>else</code> to determine whether the <code>&lt;h2&gt;</code> should say &quot;item&quot; or &quot;items&quot;.
+If there is only a single item in the list, the <code>&lt;span&gt;</code> containing &quot;item&quot; displays.
+Otherwise, if the length of the <code>items</code> array is anything other than <code>1</code>, the <code>&lt;ng-template&gt;</code>, which we&#39;ve named <code>elseBlock</code>, with the syntax <code>#elseBlock</code>, shows instead of the <code>&lt;span&gt;</code>.
+You can use Angular&#39;s <code>&lt;ng-template&gt;</code> when you don&#39;t want content to render by default.
+In this case, when the length of the <code>items</code> array is not <code>1</code>, the <code>*ngIf</code> shows the <code>elseBlock</code> and not the <code>&lt;span&gt;</code>.</p>
+
+<p>The <code>&lt;li&gt;</code> uses Angular&#39;s repeater directive, <code>*ngFor</code>, to iterate over all of the items in the <code>items</code> array.
+Angular&#39;s <code>*ngFor</code> like <code>*ngIf</code>, is another directive that helps you change the structure of the DOM while writing less code.
+For each <code>item</code>, Angular repeats the <code>&lt;li&gt;</code> and everything within it, which includes <code>&lt;app-item&gt;</code>.
+This means that for each item in the array, Angular creates another instance of <code>&lt;app-item&gt;</code>.
+For any number of items in the array, Angular would create that many <code>&lt;li&gt;</code> elements.</p>
+
+<p>You can use an <code>*ngFor</code> on other elements, too, such as <code>&lt;div&gt;</code>, <code>&lt;span&gt;</code>, or <code>&lt;p&gt;</code>, to name a few.</p>
+
+<p>The <code>AppComponent</code> has a <code>remove()</code> method for removing the item, which is bound to the <code>remove</code> property in the <code>ItemComponent</code>.
+The <code>item</code> property in the square brackets, <code>[]</code>, binds the value of <code>item</code> between the <code>AppComponent</code> and the <code>ItemComponent</code>.</p>
+
+<p>Now you should be able to edit and delete items from the list.
+When you add or delete items, the count of the items should also change.
+To make the list more user-friendly, add some styles to the <code>ItemComponent</code>.</p>
+
+<h2 id="add_styles_to_itemcomponent-">Add styles to ItemComponent</h2>
+
+<p>You can use a component&#39;s style sheet to add styles specific to that component.
+The following CSS adds basic styles, flexbox for the buttons, and custom checkboxes.</p>
+<p>Paste the following styles into <code>item.component.css</code>.</p>
+
+<pre class="brush: css">.item {
+  padding: .5rem 0 .75rem 0;
+  text-align: left;
+  font-size: 1.2rem;
+}
+
+.btn-wrapper {
+  margin-top: 1rem;
+  margin-bottom: .5rem;
+}
+
+.btn {
+  /* menu buttons flexbox styles */
+  flex-basis: 49%;
+}
+
+.btn-save {
+  background-color: #000;
+  color: #fff;
+  border-color: #000;
+
+}
+
+.btn-save:hover {
+  background-color: #444242;
+}
+
+.btn-save:focus {
+  background-color: #fff;
+  color: #000;
+}
+
+.checkbox-wrapper {
+  margin: .5rem 0;
+}
+
+.btn-warn {
+  background-color: #b90000;
+  color: #fff;
+  border-color: #9a0000;
+}
+
+.btn-warn:hover {
+  background-color: #9a0000;
+}
+
+.btn-warn:active {
+  background-color: #e30000;
+  border-color: #000;
+}
+
+.sm-text-input {
+  width: 100%;
+  padding: .5rem;
+  border: 2px solid #555;
+  display: block;
+  box-sizing: border-box;
+  font-size: 1rem;
+  margin: 1rem 0;
+}
+
+/* Custom checkboxes
+Adapted from https://css-tricks.com/the-checkbox-hack/#custom-designed-radio-buttons-and-checkboxes */
+
+/* Base for label styling */
+[type="checkbox"]:not(:checked),
+[type="checkbox"]:checked {
+  position: absolute;
+  left: -9999px;
+}
+[type="checkbox"]:not(:checked) + label,
+[type="checkbox"]:checked + label {
+  position: relative;
+  padding-left: 1.95em;
+  cursor: pointer;
+}
+
+/* checkbox aspect */
+[type="checkbox"]:not(:checked) + label:before,
+[type="checkbox"]:checked + label:before {
+  content: '';
+  position: absolute;
+  left: 0; top: 0;
+  width: 1.25em; height: 1.25em;
+  border: 2px solid #ccc;
+  background: #fff;
+}
+
+/* checked mark aspect */
+[type="checkbox"]:not(:checked) + label:after,
+[type="checkbox"]:checked + label:after {
+  content: '\2713\0020';
+  position: absolute;
+  top: .15em; left: .22em;
+  font-size: 1.3em;
+  line-height: 0.8;
+  color: #0d8dee;
+  transition: all .2s;
+  font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial;
+}
+/* checked mark aspect changes */
+[type="checkbox"]:not(:checked) + label:after {
+  opacity: 0;
+  transform: scale(0);
+}
+[type="checkbox"]:checked + label:after {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* accessibility */
+[type="checkbox"]:checked:focus + label:before,
+[type="checkbox"]:not(:checked):focus + label:before {
+  border: 2px dotted blue;
+}</pre>
+
+<h2 id="summary">Summary</h2>
+
+<p>You should now have a styled Angular to-do list application that can add, edit, and remove items.
+The next step is to add filtering so that you can look at items that meet specific criteria.</p>
+
+<div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li>
+ <li>React
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li>
+  </ul>
+ </li>
+ <li>Ember
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li>
+  </ul>
+ </li>
+ <li>Vue
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li>
+  </ul>
+ </li>
+ <li>Svelte
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Getting started with Svelte</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starting our Svelte Todo list app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamic behavior in Svelte: working with variables and props</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Componentizing our Svelte app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Working with Svelte stores</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript support in Svelte</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Deployment and next steps</a></li>
+  </ul>
+ </li>
+ <li>Angular
+   <ul>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started">Getting started with Angular</a></li>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning">Beginning our Angular todo list app</a></li>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling">Styling our Angular app</a></li>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component">Creating an item component</a></li>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering">Filtering our to-do items</a></li>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building">Building Angular applications and further resources</a></li>
+   </ul>
+ </li>
+</ul>
diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_styling/index.html b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_styling/index.html
new file mode 100644
index 0000000000..368585dea7
--- /dev/null
+++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_styling/index.html
@@ -0,0 +1,242 @@
+---
+title: 使用樣式點綴我們的 Angular 應用程式
+slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling
+tags:
+  - 初學者
+  - 框架
+  - 安裝
+  - 學習
+  - 用戶端
+  - 樣式
+  - Beginner
+  - Frameworks
+  - JavaScript
+  - Learn
+  - client-side
+  - Angular
+  - Styling
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div>
+
+<p>Now that we've got our basic application structure set up and started displaying something useful, let's switch gears and spend an article looking at how Angular handles styling of applications.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">預備知識：</th>
+   <td>Familiarity with the core <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages, knowledge of the <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">terminal/command line</a>.
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">學習目標：</th>
+   <td>To learn how to style an Angular app.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="adding_some_style_to_angular">Adding some style to Angular</h2>
+
+<p>The Angular CLI generates two types of style files:</p>
+
+<ul>
+  <li>Component styles: The Angular CLI gives each component its own file for styles.
+The styles in this file apply only to its component.</li>
+  <li><code>styles.css</code>: In the <code>src</code> directory, the styles in this file apply to your entire application unless you specify styles at the component level.</li>
+</ul>
+
+<p>Depending on whether you are using a CSS preprocessor, the extension on your CSS files can vary.
+Angular supports plain CSS, SCSS, Sass, Less, and Stylus.</p>
+
+<p>In <code>src/styles.css</code>, paste the following styles:</p>
+
+<pre class="brush: css">body {
+  font-family: Helvetica, Arial, sans-serif;
+}
+
+.btn-wrapper {
+  /* flexbox */
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+}
+
+.btn {
+  color: #000;
+  background-color: #fff;
+  border: 2px solid #cecece;
+  padding: .35rem 1rem .25rem 1rem;
+  font-size: 1rem;
+}
+
+.btn:hover {
+  background-color: #ecf2fd;
+}
+
+.btn:active {
+  background-color: #d1e0fe;
+}
+
+.btn:focus {
+  outline: none;
+  border: black solid 2px;
+}
+
+.btn-primary {
+  color: #fff;
+  background-color: #000;
+  width: 100%;
+  padding: .75rem;
+  font-size: 1.3rem;
+  border: black solid 2px;
+  margin: 1rem 0;
+}
+
+.btn-primary:hover {
+  background-color: #444242;
+}
+
+.btn-primary:focus {
+  color: #000;
+  outline: none;
+  border: #000 solid 2px;
+  background-color: #d7ecff;
+}
+
+.btn-primary:active {
+  background-color: #212020;
+}</pre>
+
+<p>The CSS in <code>src/styles.css</code> apply to the entire application, however, these styles don&#39;t effect everything on the page.
+The next step is to add styles that apply specifically to the <code>AppComponent</code>.</p>
+
+<p>In <code>app.component.css</code>, add the following styles:</p>
+
+<pre class="brush: css">body {
+  color: #4d4d4d;
+  background-color: #f5f5f5;
+  color: #4d4d4d;
+}
+
+.main {
+  max-width: 500px;
+  width: 85%;
+  margin: 2rem auto;
+  padding: 1rem;
+  text-align: center;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,.2), 0 2.5rem 5rem 0 rgba(0,0,0,.1);
+}
+
+@media screen and (min-width: 600px) {
+  .main {
+    width: 70%;
+  }
+}
+
+label {
+  font-size: 1.5rem;
+  font-weight: bold;
+  display:block;
+  padding-bottom: 1rem;
+}
+
+.lg-text-input {
+  width: 100%;
+  padding: 1rem;
+  border: 2px solid #000;
+  display: block;
+  box-sizing: border-box;
+  font-size: 1rem;
+}
+
+.btn-wrapper {
+  margin-bottom: 2rem;
+}
+
+.btn-menu {
+  flex-basis: 32%;
+}
+
+.active {
+  color: green;
+}
+
+ul {
+  padding-inline-start: 0;
+}
+
+ ul li {
+    list-style: none;
+}</pre>
+
+<p>The last step is to revisit your browser and look at how the styling has updated. Things now make a bit more sense.</p>
+
+<h2 id="summary">Summary</h2>
+
+<p>Now that our brief tour of styling in Angular is done with, let's return to creating our app functionality. In the next article we will create a proper component for to-do items, and make it so that you can check, edit, and delete to-do items.</p>
+
+<div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li>
+ <li>React
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li>
+  </ul>
+ </li>
+ <li>Ember
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li>
+  </ul>
+ </li>
+ <li>Vue
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li>
+  </ul>
+ </li>
+ <li>Svelte
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Getting started with Svelte</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starting our Svelte Todo list app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamic behavior in Svelte: working with variables and props</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Componentizing our Svelte app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Working with Svelte stores</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript support in Svelte</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Deployment and next steps</a></li>
+  </ul>
+ </li>
+ <li>Angular
+   <ul>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started">Getting started with Angular</a></li>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning">Beginning our Angular todo list app</a></li>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling">Styling our Angular app</a></li>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component">Creating an item component</a></li>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering">Filtering our to-do items</a></li>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building">Building Angular applications and further resources</a></li>
+   </ul>
+ </li>
+</ul>
diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_todo_list_beginning/index.html b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_todo_list_beginning/index.html
new file mode 100644
index 0000000000..ab903a0970
--- /dev/null
+++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_todo_list_beginning/index.html
@@ -0,0 +1,283 @@
+---
+title: 開始開發我們的 Angular 待辦事項應用程式
+slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning
+tags:
+  - 初學者
+  - 框架
+  - 安裝
+  - 學習
+  - 用戶端
+  - 元件
+  - 結構
+  - Beginner
+  - Frameworks
+  - JavaScript
+  - Learn
+  - client-side
+  - Angular
+  - Components
+  - Structure
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div>
+
+<p>At this point, we are ready to start creating our to-do list application using Angular. The finished application will display a list of to-do items and includes editing, deleting, and adding features. In this article you will get to know your application structure, and work up to displaying a basic list of to-do items.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">預備知識：</th>
+   <td>Familiarity with the core <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages, knowledge of the <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">terminal/command line</a>.
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">學習目標：</th>
+   <td>To create our basic app structure, get it displaying a list of to-do items, and understand fundamental Angular concepts such as component structure, sharing data between components, and looping content creation.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="the_to_do_application_structure">The to-do application structure</h2>
+
+<p>Just like a basic application that doesn't use a framework, an Angular application has an <code>index.html</code>.
+Within the <code>&lt;body&gt;</code> tag of the <code>index.html</code>, Angular uses a special element — <code>&lt;app-root&gt;</code> — to insert your main component, which in turn includes other components you create.
+Generally, you don't need to touch the <code>index.html</code>, instead focusing your work within specialized areas of your application called components.</p>
+
+<h3 id="organize_your_application_with_components">Organize your application with components</h3>
+
+<p>Components are a central building block of Angular applications.
+This to-do application has two components — a component as a foundation for your application, and a component for handling to-do items.</p>
+
+<p>Each component is made up of a TypeScript class, HTML, and CSS.
+Typescript transpiles, or converts, into JavaScript, which means that your application ultimately ends up in plain JavaScript but you have the convenience of using Typescript&#39;s extended features and streamlined syntax.</p>
+
+<h3 id="dynamically_change_the_ui_with_ngif_and_ngfor">Dynamically change the UI with *ngIf and *ngFor</h3>
+
+<p>This tutorial also covers two important Angular directives for dynamically altering the structure of the DOM.
+A directive is like a command that you can use in your HTML to affect change in your application.</p>
+
+<p>The first directive that this tutorial covers is Angular&#39;s iterator, <code>*ngFor</code>.
+<code>*ngFor</code> can dynamically create DOM elements based on items in an array.</p>
+
+<p>The second directive that you learn in this tutorial is <code>*ngIf</code>.
+You can use <code>*ngIf</code> to add or remove elements from the DOM based on a condition.
+For example, if users want to edit an item in the to-do list, you can provide them with the means to edit the item.
+If they do not want to edit an item, you can remove the interface for editing.</p>
+
+<h3 id="share_data_between_components">Share data between components</h3>
+
+<p>In this to-do application, you configure your components to share data.
+To add new items to the to do list, the main component has to send the new item to the second component.
+This second component manages the items and takes care of editing, marking as done, and deleting individual items.</p>
+
+<p>You accomplish sharing data between Angular components with special decorators called <code>@Input()</code> and <code>@Output()</code>.
+You use these decorators to specify that certain properties allow data to go into or out of a component.
+To use <code>@Output()</code>, you raise an event in one component so that the other component knows that there is data available.</p>
+
+<h2 id="define_item-">Define Item</h2>
+
+<p>In the <code>app</code> directory, create a new file named <code>item.ts</code> with the following contents:</p>
+
+<pre class="brush: js">export interface Item {
+  description: string;
+  done: boolean;
+}</pre>
+
+<p>The <code>Item</code> <code>interface</code> creates an <code>item</code> object model so that your application understands what an <code>item</code> is.
+For this to-do list, an <code>item</code> is an object that has a description and can be done.</p>
+
+<h2 id="add_logic_to_appcomponent-">Add logic to AppComponent</h2>
+
+<p>Now that your application knows what an <code>item</code> is, you can give it some items by adding them to the TypeScript file, <code>app.component.ts</code>.
+In <code>app.component.ts</code>, replace the contents with the following:</p>
+
+<pre class="brush: js">
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+
+export class AppComponent {
+  title = 'todo';
+
+  filter: 'all' | 'active' | 'done' = 'all';
+
+  allItems = [
+    { description: 'eat', done: true },
+    { description: 'sleep', done: false },
+    { description: 'play', done: false },
+    { description: 'laugh', done: false },
+  ];
+
+  get items() {
+    if (this.filter === 'all') {
+      return this.allItems;
+    }
+    return this.allItems.filter(item => this.filter === 'done' ? item.done : !item.done);
+  }
+
+}</pre>
+
+<p>The first line is a JavaScript import that imports Angular.
+The <code>@Component()</code> decorator specifies metadata about the <code>AppComponent</code>.
+The default metadata properties are as follows:</p>
+
+<ul>
+  <li><code>selector</code>: Tells you the name of the CSS selector that you use in a template to instantiate this component. Here it is <code>&#39;app-root&#39;</code>.
+In the <code>index.html</code>, within the <code>body</code> tag, the Angular CLI added <code>&lt;app-root&gt;&lt;/app-root&gt;</code> when generating your application.
+You use all component selectors in the same way by adding them to other component HTML templates.</li>
+  <li><code>templateUrl</code>: Specifies the HTML file to associate with this component.
+Here it is, &#39;./app.component.html&#39;,</li>
+  <li><code>styleUrls</code>: Provides the location and name of the file for your styles that apply specifically to this component. Here it is <code>&#39;./app.component.css&#39;</code>.</li>
+</ul>
+
+<p>The <code>filter</code> property is of type <code>union</code>, which means <code>filter</code> could have the value of <code>all</code>, <code>active</code>, or <code>done</code>.
+With the <code>union</code> type, if you make a typo in the value you assign to the <code>filter</code> property, TypeScript lets you know so that you can catch the bug early.
+This guide shows you how to add filtering in a later step, but you can also use a filter to show the default list of all the items.</p>
+
+<p>The <code>allItems</code> array contains the to-do items and whether they are <code>done</code>.
+The first item, <code>eat</code>, has a <code>done</code> value of true.</p>
+
+<p>The getter, <code>get items()</code>, retrieves the items from the <code>allItems</code> array if the <code>filter</code> is equal to <code>all</code>.
+Otherwise, <code>get items()</code> returns the <code>done</code> items or the outstanding items depending on how the user filters the view.
+The getter also establishes the name of the array as <code>items</code>, which you&#39;ll use in the next section.</p>
+
+<h2 id="add_html_to_the_appcomponent_template">Add HTML to the AppComponent template</h2>
+
+<p>To see the list of items in the browser, replace the contents of <code>app.component.html</code> with the following HTML:</p>
+
+<pre class="brush: html">&lt;div class="main"&gt;
+  &lt;h1&gt;My To Do List&lt;/h1&gt;
+  &lt;h2&gt;What would you like to do today?&lt;/h2&gt;
+
+  &lt;ul&gt;
+    &lt;li *ngFor="let item of items"&gt;\{{item.description}}&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;</pre>
+
+<p>The <code>&lt;li&gt;</code> contains an <code>*ngFor</code>, a built-in Angular directive that iterates over the items in the <code>items</code> array.
+For each item, <code>*ngFor</code> creates a new <code>&lt;li&gt;</code>.
+The double curly braces that contain <code>item.description</code> instructs Angular to populate each <code>&lt;li&gt;</code> with the text of each item&#39;s description.</p>
+
+<p>In the browser, you should see the list of items as follows:</p>
+
+<pre>
+My To Do List
+What would you like to do today?
+
+* eat
+* sleep
+* play
+* laugh
+</pre>
+
+<h2 id="add_items_to_the_list">Add items to the list</h2>
+
+<p>A to-do list needs a way to add items.</p>
+
+<p>In <code>app.component.ts</code>, add the following method to the class:</p>
+
+<pre class="brush: js">addItem(description) {
+  this.allItems.unshift({
+    description,
+    done: false
+  });
+}</pre>
+
+<p>The <code>addItem()</code> method takes an item that the user provides and adds it to the array when the user clicks the <strong>Add</strong> button.
+The <code>addItem()</code> method uses the array method <code>unshift()</code> to add a new item to the beginning of the array and the top of the list.
+You could alternatively use <code>push()</code>, which would add the new item to the end of the array and the bottom of the list.</p>
+
+<p>To use the <code>addItem()</code> method, edit the HTML in the <code>AppComponent</code> template.</p>
+
+<p>In <code>app.component.html</code>, replace the <code>&lt;h2&gt;</code> with the following:</p>
+
+<pre class="brush: js">&lt;label for="addItemInput"&gt;What would you like to do today?&lt;/label&gt;
+
+&lt;input
+  #newItem
+  placeholder="add an item"
+  (keyup.enter)="addItem(newItem.value); newItem.value = ''"
+  class="lg-text-input"
+  id="addItemInput"
+/&gt;
+
+&lt;button class="btn-primary" (click)="addItem(newItem.value)"&gt;Add&lt;/button&gt;</pre>
+
+<p>When the user types a new item in the <code>&lt;input&gt;</code> and presses <strong>Enter</strong>, the <code>addItem()</code> method adds the value to the <code>items</code> array.
+Pressing the  <strong>Enter</strong> key also resets the value of <code>&lt;input&gt;</code> to an empty string.
+Alternatively, the user can click the <strong>Add</strong> button which calls the same<code>addItem()</code> method.</p>
+
+
+<h2 id="summary">Summary</h2>
+
+<p>By now you should have your basic list of to-dos displaying in your browser. That's great progress! Of course, we have a lot more to do. In the next article we will look at adding some styling to our application.</p>
+
+<div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li>
+ <li>React
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li>
+  </ul>
+ </li>
+ <li>Ember
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li>
+  </ul>
+ </li>
+ <li>Vue
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li>
+  </ul>
+ </li>
+ <li>Svelte
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Getting started with Svelte</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starting our Svelte Todo list app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamic behavior in Svelte: working with variables and props</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Componentizing our Svelte app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Working with Svelte stores</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript support in Svelte</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Deployment and next steps</a></li>
+  </ul>
+ </li>
+ <li>Angular
+   <ul>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started">Getting started with Angular</a></li>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning">Beginning our Angular todo list app</a></li>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling">Styling our Angular app</a></li>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component">Creating an item component</a></li>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering">Filtering our to-do items</a></li>
+    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building">Building Angular applications and further resources</a></li>
+   </ul>
+ </li>
+</ul>