<p>In the <a target="_blank" href="https://creativebracket.com/angulardart-tutorial-lets-build-a-bookmark-manager-2/">previous tutorial</a> we added the capability of creating and editing bookmarks. We will now refactor our form functionality into a separate component as a means of keeping that concern contained within its own context. We will learn how to use special annotations to bind custom attributes and define custom events for our new form component.</p>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://youtu.be/2lYT7EWpC6M">https://youtu.be/2lYT7EWpC6M</a></div>
<p> </p>
<p><a target="_blank" href="https://youtu.be/2lYT7EWpC6M"><strong>Watch on YouTube</strong></a></p>
<p><a target="_blank" href="https://github.com/graphicbeacon/angulardart-bookmark-manager/tree/part-3">Get the source code</a></p>
<h2 id="heading-further-reading"><strong>Further reading</strong></h2>
<ol>
<li><p><a target="_blank" href="https://webdev.dartlang.org/angular/guide"><strong>AngularDart Guide</strong></a></p>
</li>
<li><p><a target="_blank" href="http://localhost:8080/generate-the-scaffolding-for-your-next-project/">Auto-Generate the scaffolding for your next project</a></p>
</li>
<li><p><a target="_blank" href="https://egghead.io/courses/get-started-wtih-dart"><strong>Get started with Dart</strong> <a href="http://Egghead.io" class="autolinkedURL autolinkedURL-url" target="_blank">Egghead.io</a> course</a></p>
</li>
</ol>


In the [previous tutorial](https://creativebracket.com/angulardart-tutorial-lets-build-a-bookmark-manager-2/) we added the capability of creating and editing bookmarks. We will now refactor our form functionality into a separate component as a means of keeping that concern contained within its own context. We will learn how to use special annotations to bind custom attributes and define custom events for our new form component.

%[https://youtu.be/2lYT7EWpC6M] 

[**Watch on YouTube**](https://youtu.be/2lYT7EWpC6M)

[Get the source code](https://github.com/graphicbeacon/angulardart-bookmark-manager/tree/part-3)

## **Further reading**

1. [**AngularDart Guide**](https://webdev.dartlang.org/angular/guide)
    
2. [Auto-Generate the scaffolding for your next project](http://localhost:8080/generate-the-scaffolding-for-your-next-project/)
    
3. [**Get started with Dart** Egghead.io course](https://egghead.io/courses/get-started-wtih-dart)

In the previous tutorial we added the capability of creating and editing bookmarks. We will now refactor our form functionality into a separate component.

AngularDart Tutorial #3: Components and Events

Creative Bracket is the go-to Dart resource blog on the Dart language and tools with easy to understand Dart tutorials and videos for your next project.
