I Imported this modal from npm
import { ModalModule} from 'ngx-bootstrap';
if you want to drag your modal,
here is the link:
[https://codepen.io/adamcjoiner/pen/PNbbbv][1]
Related
Is there any way or any framework or any particular ionic component to implement this below kind of feature.
Here is what I want:
When I open the component for first time the pop over automatically appears over a button ( like we have page tour in websites ). On click on GOT IT it will dismiss.
Use the popover component (https://ionicframework.com/docs/api/popover) with
ionViewDidEnter(){ }
As the popover is most of the time triggered by a click, you'll need to use javascript to "fake" a click :
ionViewDidEnter(){
let element: HTMLElement = document.getElementById('button') as HTMLElement;
element.click();
}
And then you create your onClick() method for your button to present the popover.
The Ionic 5 documentation says:
The textarea component accepts the native textarea attributes in addition to the Ionic properties.
But this does not apply to CSS properties of the native textarea, so how is it possible to make the ion-textarea element resizable?
You can try using the below plugin:
https://www.npmjs.com/package/ngx-autosize
OR
npm i ngx-autosize
import { AutosizeModule } from 'ngx-autosize';
below is the code i used in ionic/angular to make the ion-textarea resize:
<ion-textarea
[minRows]="1"
[maxRows]="5"
autosize
placeholder="Start writing..."
></ion-textarea>
you need to import it in and imports array in app.module and page.module where you need to use it.
In Ionic 3, I'm trying to open a modal from within a side menu:
<ion-item menuClose (click)="presentProductModal()"> Add Product</ion-item>
When the side menu is opened, the rest of the screen loses focus. When the modal link is selected, the side menu disappears. However, the modal and the main screen remain unfocused.
I'm guessing there's some timing / promise issue here, but I'm not sure what to do exactly.
Is there some workaround?
Here are two images demonstrating the issue (the "Add Product" link opens the modal):
Thanks in advance!
You can use the menu output event: ion-close.
Listen for this event, and open the modal after menu has closed.
Read more about output events for menu here: menu close event
or
Remove menuClose directive from ion-item. In your click function, close the menu programmatically using close method. Read more about it here: Close menu programmatically.
This method will return a promise which will be resolved when menu is fully closed, you can then open the modal in its resolve.
this.menuController.close(<your menu id>).then(() => {
this.modal.create.....
})
The template for the modal was simply missing wrapping tags.
you can use MenuController
import { MenuController } from 'ionic-angular';
constructor(public menuCtrl: MenuController) {
}
If you want to close menu please use close() event
this.menuCtrl.close()
If you want to open menu please use open() event
this.menuCtrl.open();
Is there any way to programmatically attach scroll="false" attribute for ion-content, with the help of a directive or other?
We need to hide the default behavior of ionic scroll while the application loading in web.
Thanks..
You have to use
$ionicScrollDelegate
.
$ionicScrollDelegate.$getByHandle('Add Your div Handle').
getScrollView().options.scrollingY = false;
For more reference,
http://ionicframework.com/docs/v1/api/service/%24ionicScrollDelegate/
I am learning ionic 2 and as part of my learning process, i am creating a basic ionic 2 app.
Below is a page from my app. I have some text contents which i would like to display in About page in app. Initially only title must be visible and once the user clicks on the title, another page with text content must be opened.
How do i achieve this? I mean, which component to use for this? Any guidance will be great. Any other approach/suggestion to achieve this is also welcome, i want the page to be clutter free.
To navigate from one page to another, You would have to use the navController offered by Ionic 2. Basically all navigation in Ionic 2 happens using the Stack data structure abstracted through the navController. This way you can push pages on top of other pages using
.push(ClassNameOfThePageYouWantToPush,{paramsYouWantToPassToTheNewPage})
And existing pages can be popped from the stack by calling
.pop(ClassNameOfThePageYouWantToPush,{paramsYouWantToPassToTheNewPage})
You can find more info here
To trigger it in the UI, use a (click) handler to call a function
<ion-title (click)="openNextPage()">About</ion-title>
In you .ts file you can then import the navController and add it to the constructor.
import { NavController, NavParams } from 'ionic-angular';
#Component({
selector: 'page-page2',
templateUrl: 'page2.html'
})
export class Page2 {
constructor(public navCtrl: NavController) {
}
openNextPage(){
this.navCtrl.push(PageYouWantToOpen);
}
}
Because this is such a common feature when you use the ionic 2 cli to generate a page
$: ionic g page my-page
It will automatically add the navController and navParams ready to be used.