Zone of Development

by Damiano Abballe

Category: Angular

Angular – How to pass values between components using @input and @output

In this post, we will see how to pass values between components using @input and @output. We start creating a project called PassData where, we will create two components called page1 and page2 and an entity called User:ng new PassDatang g c pages/page1ng g c pages/page2ng g class Entities/User First of all, we define the […]

Read More

Angular – Environment Variables

In this post, we will see how to use environment variables in Angular. We will use the same Angular project created for the post How to Dockerize an Angular application and we will add a call at the Web API Service that I have deployed on Docker.hub: First of all, we run the Docker image […]

Read More

Angular – How to Dockerize an Angular application

In this post, we will see how to Dockerize an Angular application and how to deploy it in Docker Hub. ANGULAR PROJECT:We start creating a new Angular project called “AngularDockerUI” with three components: ng new AngularDockerUIng g c share/menung g c share/homepageng g c pages/pagelist Finally, we install Bootstrap using the command npm install bootstrap […]

Read More

Angular – How to pass values between components using query string

In this post, we will see how to pass data between components, using query string.We start creating a project called PassData and installing Angular Material as well:ng new PassDatang add @angular/material Then, we create three components called “Page1”, “Page2” and “Page3”:ng g c Pages/Page1ng g c Pages/Page2ng g c Pages/Page3 Finally, we create an entity […]

Read More

Angular – How to add Angular Material in a project

In this post, we will see how to add Angular Material in an Angular project. We open Visual Studio Code and we create a new project called MaterialProject, using the commandng new MaterialProject Then, we create three components called HomePage, Page1 and Page2, using the commandsng g c HomePageng g c Page1ng g c Page2 […]

Read More

Angular – How to pass values between components using the route state

In this post, we will see how to pass values between two components, using the router state attribute (from Angular 7.0.2), creating a method to modify the username property in our usual project. First of all, we add a link button in the listusers component for using a method called goedit to update the username […]

Read More

Angular – How to deploy an application in Azure

In this post, we will see how to deploy an Angular project in Azure, using Visual Studio Code.First of all, we open a browser, go to the Azure portal and we create a Web app: In order to verify that our Web App is running, we open a browser and go to: https://angularprojectdamiano.azurewebsites.net/ Now, we […]

Read More

Angular – How to create a Modal Dialog

In this post, we will see how to create a Modal Dialog in an Angular project.In detail, we will create a modal dialog in order to delete a single item in the Users list of our usual project. First of all, we open the file app.module.ts and we import the module ModalModule, in order to […]

Read More

Angular – Template-drive Forms

Angular – Reactive Forms In this post, we will see how to define a Form, using Template-drive forms approach, for creating new users in our usual angular project.First of all, we create another component called newusertd and then, we will add it in app-routing and topmenu: ng g c newusertd [app-routing.modules.ts] [topmenu.component.html] Now, in order […]

Read More

Angular – Reactive Forms

From https://angular.io/guide/forms-overview:“Applications use forms to enable users to log in, to update a profile, to enter sensitive information, and to perform many other data-entry tasks.Angular provides two different approaches to handling user input through forms: reactive and template-driven. Both capture user input events from the view, validate the user input, create a form model and […]

Read More