Q&A Angular with Ionic Coding session

Share on facebook
Share on google
Share on twitter
Share on linkedin

See me demonstrate the course content and best practices while building a productivity app with Angular, Ionic, and Capacitor and get your Angular questions answered.

In this session (27/03/21), we will build upon the basic app from last time and use the Nx Monorepo architecture.

In future sessions we will:
– Hook the app up to Firebase with GraphQL.
– Extracting to styled UI components and publishing to App Store.

We are building on the productivity application that we started in the previous session, where we were creating the application with the NX workspace and the monorepo structure from Narwhal.

In this session we are:

  • Going to build up the data and get the data using a facade pattern.
  • Create some tasks; these will be daily/weekly/monthly/yearly tasks with some CRUD functionality to Add, Edit, and Delete tasks.
  • Navigation between monthly/yearly tasks.
  • Answer your questions along the way.

Creating the data-access facade

In this section we are going to build up the data and facade and the create a delete task function.

We want to be able to delete a task from the daily list of tasks first, we need to wire up the event in the HTML markup (delete)="onDelete(task)".

Now we can call the event in the daily.component.ts file.

Once we have the events wired up we can now create the app.facade.service.ts file, for now we will just hard code the data in this facade and we’ll move this to Firebase in a later session.

Calling the deleteTask(taskToDelete: Task) now deletes the selected task from our component, when we move the data to Firebase the deletion will persist.

Navigation between daily, weekly, and monthly

Each section daily, weekly, monthly, yearly has a <app-header> component, this header component has an input property called [backUrl] we pass into the property the URL of the next component we want to move to in order, for example daily will navigate to weekly and from weekly to monthly and so on. In the header. To Navigate to these different URL’s we use Ionic’s NavController injecting this into the header.component.ts and wiring up the onNavigateBack() event and calling the navControllers navigateForward method passing in the URL.

Question and Answer Session

Q. How to deal with increasing growing components with tens of inputs and outputs?

A. If you have many inputs/outputs, the first thing to do is to group them into groups of seven, this seems to be a manageable group for most people. If you find that you have more then you might want to consider creating an object, finding cohesion between the inputs/outputs, and group them into one thing. Alternatively, you might want to split this into smaller components or use content projection ngContent.

Q. How to deal with components calling facades or functionality from other modules?

A. You can call from facade to facade, you can also inject the facade into the component.

That’s all for this week, we go into more detail in the attached video so please do check it out.

If you would like the source code for this module head over to my Github page here.

Do you want to become an Angular architect? Check out Angular Architect Accelerator.

Related Posts and Comments


How To Become An In-Demand Angular Architect & Accelerate Your Career In 8 Weeks The Angular Architect Accelerator online program’s next cohort will soon be kicked off! Sign up now by email to learn more and secure a seat for the free warmup workshop. Enrollment is currently closed but the next cohort will start soon…  Sign up to get notified about the

Read More »

Walkthrough: Building An Angular App Using Tailwind CSS and Nx

In this video, we will cover a walk-through from scratch covering how to Build and Angular app using Tailwind CSS and Nx including Angular standalone components. 🖌 Tailwind CSS setup and usage⚙️ Nx monorepo configuration🧍‍♂️ Standalone components✅ Building a complete app in less than 2 hours with best practices ⏳ Timestamps:0:00 – Intro1:00 – Tailwind

Read More »
Key principles for a successful Angular project

Key Principles for a Successful Angular Project

Learn the key principles to improve your Angular project including industry best practices and practical examples. This post covers all the things you’d need, ranging from monorepos, continuous delivery, to design systems and performance optimizations.

Read More »