Angular 11 + Django MySQL CRUD example – Part 3: Angular Client
Tags: angular11, django, mysql
Published: 2021-03-22 11:08:01

https://grokonez.com/angular-11-django-mysql-crud

<!-- wp:paragraph -->
<p>This tutorial is part 3 of <a href="https://grokonez.com/frontend/angular/django-angular-6-example-django-rest-framework-mysql-crud-example-part-1-overview">Django-Angular-MySQL series</a>. Today, we will create Angular Client to make HTTP request &amp; receive response from Django Server.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&gt;&gt; <a href="https://grokonez.com/frontend/angular/django-angular-6-example-django-rest-framework-mysql-crud-example-part-1-overview">Part 1: Overview</a><br>&gt;&gt; <a href="https://grokonez.com/python/django-angular-6-example-django-rest-framework-mysql-crud-example-part-2-django-server">Part 2: Django Server</a></p>
<!-- /wp:paragraph -->

<!-- wp:more -->
<!--more-->
<!-- /wp:more -->

<!-- wp:heading {"level":3} -->
<h2>Video</h2>
<!-- /wp:heading -->

<!-- wp:html -->
<figure><iframe width="853" height="480" src="https://www.youtube.com/embed/TEOoxcASn1k?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe></figure>
<!-- /wp:html -->

<!-- wp:heading {"level":3} -->
<h2>Angular Client Overview</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":5} -->
<h3>Goal</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The image below shows overview about Angular Components that we will create:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":16859} -->
<figure class="wp-block-image"><img src="https://grokonez.com/wp-content/uploads/2019/02/django-angular-6-django-rest-api-mysql-angular-client-architecture.png" alt="django-angular-6-django-rest-api-mysql-angular-client-architecture" class="wp-image-16859"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":5} -->
<h3>Project Structure</h3>
<!-- /wp:heading -->

<img src="https://grokonez.com/wp-content/uploads/2019/02/django-angular-6-django-rest-api-mysql-angular-project-structure.png" alt="django-angular-6-django-rest-api-mysql-angular-project-structure" width="251" height="525" class="alignnone size-full wp-image-17262" />

<!-- wp:paragraph -->
<p>We have:<br>- 4 components: <strong><em>customers-list</em></strong>, <strong><em>customer-details</em></strong>, <strong><em>create-customer</em></strong>, <strong><em>search-customer</em></strong>.<br>- 3 modules: <strong><em>FormsModule</em></strong>, <strong><em>HttpClientModule</em></strong>, <strong><em>AppRoutingModule</em></strong>.<br>- <strong><em>customer.ts</em></strong>: class Customer (id, firstName, lastName)<br>- <strong><em>customer.service.ts</em></strong>: Service for Http Client methods<br>- <strong><em>app-routing.module.ts</em></strong>: Routing configuration</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h2>Setup Angular Project</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":5} -->
<h3>Create Angular Project</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Run command: <code>ng new AngularDjango</code>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":5} -->
<h3>Create Service &amp; Components</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>On Project folder, run commands below:<br>- <code>ng g s customer</code><br>- <code>ng g c create-customer</code><br>- <code>ng g c customer-details</code><br>- <code>ng g c customers-list</code><br>- <code>ng g c search-customers</code><br>On each Component selector, delete <code>app-</code> prefix, then change <strong>tslint.json</strong> <code>rules</code> - <code>"component-selector"</code> to <strong>false</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h2>Implement Angular Client App</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":5} -->
<h3>Data Model</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Create new file named <em>customer.ts</em>:</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted {"className":"lang:java"} -->
<pre><code class="language-java">export class Customer {
    id: number;
    name: string;
    age: number;
    active: boolean;
}
</code></pre>


More: https://grokonez.com/angular-11-django-mysql-crud