Ionic Cat Wiki

This is an Ionic conversion of my Angular Cat Wiki.

Screenshots

---

---

---

---

Built With

• Angular 17.0.2
• Ionic 7.5
• thecatapi

Thoughts

• After install, there was a warning in the angular.json about progress not being allowed. This Stack Overflow has been unanswered for over a year. I will try to find an answer and I will leave the progress property in the file for now.
• I used the application builder in the angular.json.
• The home route is lazy-loaded in the initial app.routes.ts file. I need to look more into this, but it seems like this is more acceptable now. I don't think it is correct to lazy-load the home route.
• Ionic adds generated pages directly to the app.routes.ts.
• I used the Ionic CLI to initialize the project. Its Angular version is pretty outdated at only 17.0.2.
• The breed requests work without an API key. To get images and some additional info, you need an API key.
• ngOnInit will only fire each time the page is freshly created, but not when navigated back to the page. ngOnDestroy will only fire when a page is "popped".
• ionViewWillEnter would be useful for the API requests if the response data was likely to change frequently. I don't think that applies here.
• Doesn't seem like you can use the inject function to enable icons in your app. addIcons is a function that you need to call in the constructor to be able to reference an icon by name in your template. See the Ionic docs for more.
• Tests with template-driven forms need to be async. Template forms are not available immediately like reactive forms.
• Adding a suggestions box under or above the input is not simple. There isn't really a good UI component to use. Other developers have used modals and positioning tricks to create something similar. This repo and this repo may be useful for ideas.
• I added a typeahead component to replace the standard input box on the homepage. This change matches the DevChallenges mobile design.
• The typeahead component makes the breeds page a little redundant.
• I used radio buttons that the user could select. Users need to confirm their choice, and that triggers navigation to the breed detail page.
• The modal's search input does not allow a user to bypass selecting the radio button.
• Typing events with Ionic is not straightforward. You have to create your own interface. This creates extra difficulty in testing. Ionic has known about this issue for years, but not much progress has been made. I haven't found much great material about this. I saw one example where the developer just used Event and avoided trying to do it with Ionic at all.
• Essentially, a lot of the typing solutions are not strict. You can use $any($event) around the event object inside the template, or you can create an interface that uses any. This is just done to avoid eslint warnings for using any.
• It might actually be more clear to just use any and disable eslint warnings for those functions.
• Ionic Grid is another example where some developers recommend sticking with CSS. I try to use UI components if they are available, but it can be difficult without great documentation or examples to follow. I don't want to sink a lot of time into making a simple grid.

Continued Development

• Styling. Desktop considerations? I have not reused my previous CSS in this project.
• TypeScript issues.
• There are some lingering issues with the tests. The modal spy and the modal trigger are causing issues. I have searched for examples and haven't found much to explain the best way to test an Ionic modal. TypeScript issues stemming from Ionic event typing are also causing testing errors.

How to Use

# Clone this repository
$ git clone https://github.com/jdegand/ionic-cat-wiki.git

# Install dependencies
$ npm install

# Need to add / update environment.development.ts file with an apiKey from thecatapi

# Run the app and navigate to localhost:4200
$ npm start

# Run the tests (Firefox launcher is installed)
$ ng test --code-coverage

Need to add / update environment.development.ts file

export const environment = {
    production: false,
    apiKey: 'catapi goes here'
};

Useful Resources

• Ionic - components
• Ionic - navigation
• Ionic - testing
• Forums - why does the default home page html have 2 ion headers
• Stack Overflow - how to set height on ion img
• Stack Overflow - ionic components are not destroyed after navigation to another page
• Stack Overflow - is it necessary to unsubscribe complete in a backend service to prevent side eff
• YouTube - Styling Ionic Components in Angular with CSS Variables
• Github - docs: document addIcons usage
• Stack Overflow - how to unit test a component that depends on parameters from activatedroute
• Medium - advancements in the angular router
• YouTube - How do I test Components & Routing with the RouterTestingHarness
• Dev.to - testing routed component with routertestingharness
• Stack Overflow - importing ionicmodule forroot in tests causes them to fail if more then one t
• Devdactic - write unit tests ionic angular
• Stack Overflow - unit test angular standalone component overriding provider not used
• Angular Docs - RouterTestingHarness
• Angular Dev - components-scenarios routertestingharness
• Angular Docs - testing services
• Angular Docs - http test requests
• Stack Overflow - karma angular test router navigate
• YouTube - Chapter 18 Template Driven Form | Unit Test | Angular | Jasmine | Karma
• Stack Overflow - spec has no expectation console eror although expect is present
• Stack Overflow - testing error case with observables in services
• Stack Overflow - error expected no open requests found 1
• Stack Overflow - spying on console error with jasmine
• Github - feat: Support input#list
• Github - feat: IonInput with typeahead feature
• Github - bug: inline modal does not open when the triggering element is added/rendered with a delay
• Stack Overflow - karma jasmine how i test a close function in a modal
• Stack Overflow - integration testing an ionic modal with jasmine in angular
• RxJS Docs - throwError
• Ionic Forums - exception in unit tests with radio buttons config get is not a function
• Blog - CustomEventTypesInIonic
• Stack Overflow - ionic react how to properly type typescript event object paramteter in delegat
• Modern Angular - is it ok to subscribe in angular
• Medium - angular show loading when obs async is not yet resolved
• Github - bug: Angular - Argument of type 'Event' is not assignable to parameter of type CustomEvent #24245
• Stack Overflow - typescript type string undefined is not assignable to type string