Ionic 4 - New Starter Help

Ionic Framework Ionic Angular
1

Hi everyone, I’m new to Ionic and Angular so please forgive any stupid questions.

I am attempting to learn this framework and I’m building a random app purely to see how I’m doing it in. I seem to be struggling with the most basic stuff though, watching youtube tutorials on Ionic 4 and Angular JS, everything seems right or at least the same as what the people in the tutorials have yet mine has elements that don’t work.

For example I cannot get a menu to work, I can get a split plane and display a menu on the first page but something like toggling a menu on any other page or even displaying the menu on another page doesn’t work.

I’m not sure if perhaps my layout of the html pages are incorrect, I’m at looking at this similar to a normal HTML project which could be wrong but I didn’t find anything on actually structuring the front end page. I’ve included my menu page below which ideally I’m hoping to have some tabs that link to pages, there would only be a few but even then I’m open to suggestions.

The issue with just this part for example is the title, I would expect this to resize between a desktop and a mobile device (I’m running in a browser and ionic lab to simulate ios and android) but it seems to have no form of mobile responsiveness at all?

AGain I could totally be wrong and end up doing something completely wrong and I’m hoping somebody could point me in the right direction because so far the tutorials haven’t been much help and the documentation doesn’t seem to answer my questions, or simply I just don’t get it…

<ion-buttons slot="start">

  <ion-menu-button></ion-menu-button>

</ion-buttons>

<ion-title>

  <h1 class="title">

  Mr B's Droid Checklist

  </h1>

</ion-title>

<ion-tab-bar slot="top" has-header="true">

  <ion-tab-button tab="astromechs">

    <ion-icon name="person"></ion-icon>

  </ion-tab-button>

  <ion-tab-button tab="d0">

    <ion-icon name="call"></ion-icon>

  </ion-tab-button>

  <ion-tab-button tab="bd1">

    <ion-icon name="settings"></ion-icon>

  </ion-tab-button>

  <ion-tab-button tab="bt1">

    <ion-icon name="settings"></ion-icon>

  </ion-tab-button>

</ion-tab-bar>

Any suggestions would be greatly appriciated

Thanks
Rob

2

I get that everybody has different learning styles, and I personally find videos excruciatingly tedious and useless, so I admit that I’m heavily biased against them. I’m sure there are good ones out there, but I can’t give any recommendations because they are definitively not my cup of tea.

Some key terminology notes here:

People do it as shorthand, but “Ionic” isn’t a monolithically versioned thing, so it can cause confusion to speak of “Ionic 4”. More detail here.

“AngularJS” describes a now-pretty-obsolete-and-should-probably-be-ignored-by-somebody-in-your-position version of the framework that is now just glossed “Angular”. Version 1 of the Ionic Framework used AngularJS. Nothing thereafter did, so I would strongly suggest aggressively avoiding any resources referencing “AngularJS”.

If you’re going to use Ionic with Angular, it is crucial to be grounded in Angular itself. I think the single best resource for this is the Tour of Heroes. If you get all they way through that, you should become familiar with the key building blocks you’ll be working with and what idiomatic Angular code looks like.

As for Ionic-specific stuff, the quasi-official Ionic showcase is the ionic-conference app. I would suggest looking to it to crib idioms surrounding any Ionic component you’re particularly interested in.

This may seem like I’m blowing off the code snippet you posted, and that may be frustrating. It is, however, a fair assessment of the situation, and the reason I’m ignoring it is that the has-header attribute on ion-tab-bar hasn’t existed since v1, so I fear that you have a bunch of frankencode that would probably be better off left in the dust with a fresh start.

3

Hi there,

Thanks for the reply, I am very much in agreement with you on that, I tend not to like YouTube videos either as the ones I’ve found are from even late 2019 but when I’m doing the same thing as the person in the video, I’m already missing things such as in the .module.ts file, I’m not “importing” half as much as what they are but when I manually type it my IDE says it’s already been imported elsewhere.

I’ll check out your links and start from the basics and hopefully that will give me a good place to start. The whole purpose it to have something that can be used on a desktop but easily used and viewed on a mobile device but behaves the same way an app would without going into an actual app development. I did look at Xamarin Forms but really struggled to find anything relating to instructions for what I wanted to make (Checklist Application)

Thank you for being so polite with your answer as well, I’ve asked similar question on various forums and most of the time I get slated for not being an expert which sucks so thank you for being helpful and polite in your response, I really appriciate that :slight_smile:

Thanks
Rob