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 Handle Errors in a Reactive Angular App

In this post, we will cover how to handle errors in a reactive Angular app. To provide a good user experience you should always let your users know what state your application is in. That includes showing a loading spinner when it’s loading and showing error messages if there are any errors. It is a

Read More »

How to Set Up Git Hooks in an Nx Repo

Git hooks can be used to automate tasks in your development workflow. The earlier a bug is discovered, the cheaper it is to fix (and the less impact it has). Therefore it can be helpful to run tasks such as linting, formatting, and tests when you are e.g. committing and pushing your code, so any

Read More »

The Stages of an Angular Architecture with Nx

Long gone are the times when the frontend was just a dumb static website. Frontend apps have gotten increasingly complex since the rise of single-page application frameworks like Angular. It comes with the price of increased complexity and the ever-changing frontend landscape requires you to have an architecture that allows you to scale and adapt

Read More »

The Best Way to Use Signals in Angular Apps

Since Angular 16, Angular now has experimental support for signals and there is a lot of confusion in the community about whether this is going to replace RxJS or how it should be used in an app in combination with RxJS. This blog post sheds some light on what I think is the best way

Read More »

High ROI Testing with Cypress Component Testing

Testing is one of the most struggled topics in Angular development and many developers are either giving up testing altogether or applying inefficient testing practices consuming all their precious time while giving few results in return. This blog post will change all this as we will cover how I overcame these struggles the hard way

Read More »