I am using ionic slides and I want to hide the pager when the user reaches the last slide.
There is a showPagger() method but I cannot figure out how to use it for this purpose.
Any help on this?? Thanks
html :
<ion-slides pager (change)="onSlideChanged()">
...
<ion-slides>
js :
$scope.onSlideChanged = function() {
if ($ionicSlideBoxDelegate.currentIndex() == $ionicSlideBoxDelegate.slidesCount()) {
$ionicSlideBoxDelegate.showPager(false);
}
else {
$ionicSlideBoxDelegate.showPager(true);
}
}
I will update answer later.
Unfortunately, after searching and searching I found out that it is an open issue about it in ionic repository. The showPager property is not exposed to the directive API, so there is no direct use to it.
Related
I'm using Angular 10, on click the following function is executed to preform direction change:
private changeHtmlDirection(direction: 'rtl' | 'ltr') {
document.getElementsByTagName("html")[0].dir = direction;
}
It works well, only that the Angular CDK does not update.
I tried to find an API to change Angular CDK's direction at runtime, but couldn't find any.
I saw that there's a BidiModule but it uses only to get the current direction rather than set it.
Is there any solution?
According to the material documentation, you can't change 'dir' on the "html" tag so that affects bidi API. You can see the document at the following link:
bi-directionality document
But if you want to use material bi-directionality you can add the 'dir' directive to a container element in the root component like bellow:
<div [dir]="documentDirection"> </div>
and whenever the 'documentDirection' variable changes, the bidi "change emitter" will be emit.
like following code you can subscribe to it:
constructor(
private dir: Directionality ) {
this.isRtl = dir.value === 'rtl';
this.dir.change.subscribe(() => {
this.isRtl = !this.isRtl;
});
}
I am using a theme made with bootstrap and sass for my webapp.
I am not very familiar with bootstrap and sass.
I need to know how to get the code to insert on my webapp.
You can see the notification example builder here
And more info abou the theme here
So... I need set a toast notification and use it on this function (for the alert):
function validarNombre () {
var tituloAlbm = document.querySelector("#dni").value;
console.log(tituloAlbm);
if (tituloAlbm == "" ) {
alert("Please Fill All Required Field");
return false;
} else if (tituloAlbm !== null){
add();
}
}
I know that is a very vague question, but I am really stuck on this...
Thank you in advance.
Kind regards.
I like Alertify JS as I have used it.
You will just need to call the Alertify via CDN or from a static folder and call that in the script.
You can check the demo here on JsFiddle
Check the default notification section here: https://alertifyjs.com/
You can use these properties
alertify.alert('Ready!');
alertify.success('Success message');
alertify.error('Success message');
So I've been working with the autodesk viewer and managed to include it in a vue.js project.
I'm working with the V6 viewer and created my project with the Vue cli-3 and have been working on the tutorials.
My issue for now is that the css classes added to a viewer button are not loaded.
Here is what I mean:
ToolbarExtension.prototype.createUI = function() {
var viewer = this.viewer;
// Button 1
var button1 = new Autodesk.Viewing.UI.Button('my-view-front-button');
button1.onClick = function(e) {
viewer.setViewCube('front');
};
button1.addClass('my-view-front-button');
button1.setToolTip('View front');
// Button 2
var button2 = new Autodesk.Viewing.UI.Button('my-view-back-button');
button2.onClick = function(e) {
viewer.setViewCube('back');
};
button2.addClass('my-view-back-button');
button2.setToolTip('View Back');
// SubToolbar
this.subToolbar = new Autodesk.Viewing.UI.ControlGroup('my-custom-view-toolbar');
this.subToolbar.addControl(button1);
this.subToolbar.addControl(button2);
viewer.toolbar.addControl(this.subToolbar);
};
This code is used so i can create a toolbar with two buttons.
Basicly these lines add a css class to the buttons.
button1.addClass('my-view-front-button');
button2.addClass('my-view-back-button');
and here is my result
As you can see my buttons are blank and they're supposed to be red and blue.
.my-view-front-button {
background: red;
}
.my-view-back-button {
background: blue;
}
I tried to work with an other blank vue project (same with cli-3 and it does work.)
I'd like to find a solution about this issue. I've met a lot problems with this lib and not a lot of solutions.
Thank you for you help.
I'll do my best to answer your questions if something is missing.
So I looked up my code and found out the solution to my problem.
I was using the viewer as an a child component, the thing is, i had to change the scoped property from the <style lang="scss" scoped></style> directive.
Removing the scoped property fixed the buttons, they now look like the tutorial.
Sorry for the inconvenience, hope this post would help someone else.
I am trying to update UI automatically, avoiding jQuery. I just want to update a css of a button after a click happened.
Should it be done in html with inline javascript code or typescript component?
Right now I am evaluating the latter, handling CSS in typescript as follows.
The component which changes its alreadyLiked property:
sendLike(recipientId: number) {
this.userService.sendLike(fromUserId, this.user.id).subscribe(data => {
this.alertifyService.success('You have liked ' + this.user.name);
// any way to update UI without this trash?
const btnLikeMe = <HTMLInputElement> document.getElementById('btnLikeMe');
btnLikeMe.classList.remove('btn-primary');
btnLikeMe.classList.add('btn-success');
btnLikeMe.classList.add('active');
btnLikeMe.disabled = true;
}, error => {
this.alertifyService.error(error);
});
}
After alreadyLiked is changed, I would like to update btnLikeMe css automatically in HTML:
<button id="btnLikeMe" class="btn" (click)="sendLike(user.id)"
[disabled]="alreadyLiked"
[ngClass]="alreadyLiked ? 'btn-success active' : 'btn-primary'"
title="{{alreadyLiked?'You already liked me. Thank you' : 'Like me now!'}}">
Like
</button>
It is working but it seems to be a bad approach.
I am using "#angular/core": "^5.2.0"
You don`t need JQuery for this. NgClass is the right way.
NgClass adds and removes CSS classes on an HTML element.
In some point if you want do to more complex things you can call functions...[ngClass]="getClass()"
Then you can debugging, but you can`t do this in HTML.
When you have to touch the DOM, you should use Renderer2.
I'm trying to add a section widgets dynamically to Card/CardService on newSelectionInput OnChangeAction, the card already added.
I did not see any documentation on Google, how to achieve this behavior.
Can someone please direct me to the right documentation or how I can do this.
Thanks
We can add/remove a section from card which is already built in onchange action of input fields.
function getCard(addSection) {
// this is your function to build the card. The initial "getCard" function call does not have any parameter passed, so it will be treated as "false". Hence no section will be added
addSection = addSection || false;
if(addSection) {
// add your section here
}
.....
return card;
}
function OnChangeAction() {
var card = getCard(true);
return CardService.newActionResponseBuilder().setNavigation(CardService.newNavigation().updateCard(card)).build()
}
I hope this solves your problem.