In Ionic Framework, I use this HTML structure on all my views:
<ion-view view-title="Some title">
<ion-nav-buttons>
</ion-nav-buttons>
<ion-content>
Then I get a "< Back" button generated automatically. However, sometimes this button has the word "Back" and sometimes it has the name of the previous view.
Where and how can I change how the back button title behaves?
You should use the $ionicConfigProvider:
var myApp = angular.module('reallyCoolApp', ['ionic']);
myApp.config(function($ionicConfigProvider) {
$ionicConfigProvider.views.maxCache(5);
// note that you can also chain configs
$ionicConfigProvider.backButton.text('Go Back');
});
This example is from the official Ionic docs.
To control the behaviour of the "last view text on back button" you could set backButton.previousTitleText(value) to false.
In Ionic Framework 2 you could now use the set the config property backButtonText to ''
#NgModule({
declarations: [ MyApp ],
imports: [
IonicModule.forRoot(MyApp, {
backButtonText: '',
}, {}
)],
bootstrap: [IonicApp],
entryComponents: [ MyApp ],
providers: []
})
Related
I Have 3 apps : root-config (single-spa), navbar-app ( port 4201 angular 12 ) angular-app (port 4202 angular 12 )
My root-config app (localhost:9000) has root-config.ts
registerApplication({
name: "#org1/myNavbarApp",
app: () => System.import("#org1/myNavbarApp"),
activeWhen: ["/"],
});
registerApplication({
name: "#org1/myAngularApp",
app: () => System.import("#org1/myAngularApp"),
activeWhen: ['/angular']
});
my myNavbarApp has app-routing.module.ts
const routes: Routes = [
{
path: 'login', component: LoginComponent,
}, {
path: 'menu',
component: MenuComponent,
},
{path: '**', component: EmptyRouteComponent}, // <-- will display angular app but will not
leave <mat-toolbar> in view from myNavBarApp ( only if i stay in localhost:4200/menu
and do refresh -> angular app default view displays under <mat-toolbar> of
myNavBarApp ( as expected behavior )
// {path: '**', redirectTo: 'login'}, // <-- renders default "login.component" on first load
of localhost:9000 (exactly what i need) but will cause next issue:
after navigateToUrl('angular') is done - ```login.component``` angular app content
are visible in the same page - ( not expected behavior )
];
const config: ExtraOptions = {
useHash: false,
enableTracing: false,
relativeLinkResolution: 'legacy',
};
#NgModule({
imports: [RouterModule.forRoot(routes, config)],
exports: [RouterModule],
providers: [{provide: APP_BASE_HREF, useValue: '/'}]
})
export class AppRoutingModule {
}
NavBarApp has menu.component.html includes next:
<mat-toolbar color="warn" class="toolbar">
<mat-button-toggle-group class="menu">
<mat-button-toggle (click)="singleSpaNavigateUrl('angular')" value="angular">Angular App</mat-button-toggle>
</mat-button-toggle-group>
</mat-toolbar>
and menu.component.ts includes next :
import {getAppNames, navigateToUrl, getMountedApps} from "single-spa";
public singleSpaNavigateUrl(url: string) {
console.log('appNames', getAppNames()); <-- IS ALWAYS EMPTY ARRAY , Why ?
console.log('mountedAppNames', getMountedApps()); <-- IS ALWAYS EMPTY ARRAY , Why ?
navigateToUrl('/'+ url); // <-- navigates to /angular
}
How to achieve myNavBarApp menu.component will stay visible in all child apps after login / or when is needed ?
How to achieve login.component as default , when myNavBarApp is loaded from root-config app in browser ( without entering "/login" manually after that)
Single spa documentation says: single-spa Layout Engine is optional at this time but is recommended if you foresee utilizing server side rendering .. So i do not have server rendering ...thats why i do not implement layouts , and want to know how it possible to do without it ?
Why getAppNames() and getMountedApps() returns always empty array ?
I have posted my code below. I am using angular DragDropModule and for some reason [cdkDragFreeDragPosition] is not working. it gives me the error shown below. I added DragDropModule to my ngModule as shown below. When I remove [cdkDragFreeDragPosition] tag, the drag drop works fine but once added it gives me the error shown below. [cdkDragStartDelay]="1000" also gives the same error. I don't know why this issue is occurring. tried to find a solution online but couldn't. Any help would be appreciated.
<div class="example-boundary">
<div class="example-box"
cdkDragBoundary=".example-boundary"
cdkDrag
*ngFor="let table of tables"
id="{{table._id}}"
(cdkDragEnded)="dragEnd($event)"
[cdkDragDisabled]="false"
[cdkDragFreeDragPosition]="getTablePosition(table)"
(cdkDragMoved)="dragMoved($event, table)">{{table.username}}
</div>
import { ServerOrderComponent } from './server-order/server-order.component';
import {DragDropModule} from '#angular/cdk/drag-drop';
#NgModule({
imports: [
MDBBootstrapModule.forRoot(),
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
}),
BrowserModule,
ReactiveFormsModule,
HttpClientModule,
routing,
FormsModule,
NotifierModule.withConfig(customNotifierOptions),
HttpModule,
MatIconModule,
BrowserAnimationsModule,
MatSidenavModule,
MatCheckboxModule,
MatFormFieldModule,
MatTableModule,
MatSortModule,
MatDividerModule,
MatButtonToggleModule,
MatProgressSpinnerModule,
NgMultiSelectDropDownModule.forRoot(),
DragDropModule
],
entryComponents: [],
declarations: [
AppComponent,
ServerOrderComponent
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule {
}
So after looking around a bit, I decided to upgrade to angular material 8 as i was using angular 7 which did not have support for that. After upgrading, it works fine.
so we're attempting to move our project from Ionic 3 to Ionic 4. To begin we started a basic tabs app: ionic start myApp tabs
I made two pages:
ionic generate page userList
ionic generate page userDetailed
I want two different tabs to have the ability to navigate to "UserListPage".
So I added it to the "tab1" & "tab2" router children:
tabs.router.module.ts
{
path: 'tab1',
children: [
{
path: '',
loadChildren: '../tab1/tab1.module#Tab1PageModule'
},
{
path: 'user-list',
loadChildren: './user-list/user-list.module#UserListPageModule'
}
]
}
Now I want the UserListPage to be able to navigate to the "UserDetailedPage".
I tried adding user-detailed as a path onto the UserListPageModule like so:
user-list.module.ts
const routes: Routes = [
{
path: '',
component: UserListPage,
children: [
{
path: 'user-detailed',
loadChildren: '../user-detailed/user-detailed.module#UserDetailedPageModule'
}
]
}
];
Now when I'm on tab1 & click a button to go to the list page, it works.
However when I click a button to go from list page to the detailed page, it changes the URL but does not display the page.
Any ideas what I'm doing wrong?
Your detailed page will be "user-list/user-detailed", your subroutes like user-detailed will be appended to the current route of user-list.
I want to move from 1 page to another page and for that I have write below code in home.page.html file.
<div style="display: flex; justify-content: center; margin-top: 20px; margin-bottom: 20px;">
<ion-button (click)="goToLoginPage()" size="large">Continue</ion-button>
</div>
Below is home.page.ts file code.
export class HomePage {
constructor(public navController: NavController) {
}
goToLoginPage(){
this.navController.navigateForward(LoginVCPage) // Getting error at this line.
}
}
Below is error screenshot.
Any help will be appreciated
In Ionic 4 using NavController is deprecated. See this statement from the Migration Guide:
In V4, navigation received the most changes. Now, instead of using
Ionic's own NavController, we integrate with the official Angular
Router.
Angular manages it's routes in a separate file, in Ionic 4 this file is named app-routing.module.ts. Every time you create a new page using ionic g page pagename the CLI will automatically create a new entry in the routes array in app-routing.module.ts.
So assuming you have created a test page and now have following routes in app-routing.module.ts:
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', loadChildren: './home/home.module#HomePageModule' },
{ path: 'test', loadChildren: './test/test.module#TestPageModule' },
];
You can move to another page by adding a href property to your button with the corresponding path (e.g. '/test') to the page you want to move to:
<ion-button href="/test">Move to test page</ion-button>
You could also use the routerLink directive as pointed out here:
<ion-button [routerLink]="['/test']">Move to test page</ion-button>
If you want/need to navigate programmatically you'll have to inject the router service into your page/component and call navigateByUrl like so:
constructor(private router: Router) { }
goToTestPage() {
this.router.navigateByUrl('/test');
}
Also see the Angular docs on routing and the Ionic v4 docs on this topic.
To add to #Phonolog 's answer you should also use routerDirection="forward" or whatever direction it may be.
app.module.ts:
imports: [
IonicModule.forRoot(MyApp, {}, {
links: [
{ component: CategoryPage, name: 'Category', segment: 'category:id'}
]
}
],
providers: [
{
provide: LocationStrategy,
useClass: PathLocationStrategy
}
]
Configuration of the page I am navigating too
#IonicPage({
name: 'Category',
segment: 'category/:id'
})
Code which triggers navigation:
this.nav.push(CategoryPage, {id: 3});
The component does load as expected and I can call this.navParams.get('id') which yields 3 from within the components class.
Expected result: The url changes to /category:3
Observed result: The url changes to /category:id
so if you are trying to implement deep links for Ionic 3 (since Ionic 4 is using Angular's router by default now) you need to ensure you also configure each page accordingly.
The page you are navigating to needs to have configs added via #IonicPage:
#IonicPage({
segment: 'second/:id'
})
See more in ionic docs or this guide