I am trying to use progress bar but it's not getting displayed , but when i inspect i see the tags present. Following is what i have done till now. attaching the screenshot for your reference. Also i need details like i am using angular material to render all the components like table , checkbox but it still shows in old style.
my app.component.html :
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
checkbox :
Related
i have a column with mgt-person component on hover i am able to view the person card in the fluent ui detailslist the problem is that the person card is visible only half,
how do we pop it out ?
when i inspect in browser and added css
ex margin-Bottom:100% for the class person-details-container
poped out personcard
it popout like this, but when i add css in the files like this margin-bottom is not working but background color is working
mgt-person {
--person-card-background-color: pink;
--person-card-margin-bottom:100%; --- this doesnt work
}
I have an angular project I am developing using angular material for a slide toggle and text fields, and cdk drag and drop for drag and drop functionality. I am pretty new to angular libraries and angular in general.
I have run into an issue where the slide toggle is only toggling the first element inside an *ngFor loop. I have tried adding a let i = index to the ngFor and it is always passed as 0 no matter which toggle you select, however if I place {{ i }}, it will show up as the correct index. I am at a loss.
https://stackblitz.com/edit/angular-yezv9a
If you go to the project at that link, and toggle the test 2 or 3 toggle, it will shift the first 1 and I can not seem to figure out why
Any help is appreciated
If I understand you correctly, There is one issue in your code is mat-slide-toggle element has an id which is repeating in ngFor
<mat-slide-toggle id="toggle" color="primary" (change)="onToggle(button)" [checked]="button.enabled"></mat-slide-toggle>
I removed the id attribute and found working correctly, based on my understanding you can find a fork of working example in below url
https://angular-yezv9a-bac1jz.stackblitz.io/
Make the id attribute as empty
Will work as expected
Starting out with AEM by using CRXDE, and making a structure component for a header hero component that will show a title and subtitle.
I wanted to add a cq:dialog by just copying the libs/wcm/foundation/components/title/cq:dialog component, and pasting it inside the hero component. There are two values: jcr:title and jcr:subtitle. When it comes to those values, they do display if I manually add them to my page from the contents directory.
The problem that I am facing is that the dialog is not showing at all when I hover over the hero area of the website from the editor.html view.
Is there something I am doing wrong?
Do not use jcr:subtitle. This property name appears to be outdated/invalid and will most likely throw an exception related to the node type definition. Simply use subtitle and you should be fine.
I am using font-awesome version 4.7.0 with Angular 5. When I add an icon to a screen the icon immediately changes from tag to and I cannot access its class from an Angular component which is what I want to do.
The resulting behavior is that the first icon defined is shown properly but any subsequent changes I make that should be reflected on the UI with a change of the font awesome icon are not shown at all.
The specific problem is that I wan the icons to change when sorting a table. The initial icon is set up to be fa-sort, and it displays correctly, but when clicking on the table header, the content gets sorted and updated but the icons dont change to fa-sort-up or fa-sort-down. I've tested the logic and it works properly.
The current HTML code which should be performing this action looks like this:
<i [ngClass]="sortBy.key !== 'login' ? 'icon-sort' : sortBy.order === 'desc' ? 'icon-sort-up' : 'icon-sort-down'"></i>
This is because fontawesome replaces your tag with . To change icons use this template (use in class that you need):
<span *ngIf="sortAsc"><i class="icon-sort-up"></i></span>
<span *ngIf="!sortAsc"><i class="icon-sort-down"></i></span>
Try maybe assigning the icon within the component code itself, such as:
in Component
getIcon(){
sortBy.key !== 'login' ? 'icon-sort' : sortBy.order === 'desc' ? 'icon-sort-up' :
'icon-sort-down'
}
I think it has to do with change detection, or you can manually trigger it after you sort, by importing change detection.
ex:
`constructor(cd: ChangeDetectorRef) {}`
and then in your code,
this.cd.detectChanges();
I am using ionic 3. I am trying to do a list of events where the event name is on the left side and the event note (the start time) is on the right side of the item in an ion-note. Here is my code:
<ion-list *ngIf="events.length !== 0">
<ion-item-group>
<ion-item-divider>
Upcoming events
</ion-item-divider>
<button ion-item *ngFor="let event of events" (click)="itemTapped($event, event)">
{{event.name}}
<ion-note item-right>{{event.start | date: 'HH:mm'}}</ion-note>
</button>
</ion-item-group>
</ion-list>
If I do just that, the note gets displayed on the right properly, however the primary text (the event's name) gets chopped off with an ellipsis inserted in the end, even though it would fit just fine. Here's a picture:
I have checked the documentation on ionic's website, and I copied over the demo source from here: https://github.com/ionic-team/ionic/blob/master/demos/src/list/pages/page-one/page-one.html
Funny enough, it looks good in their showcase but pasted into my application it looks just as off as my example.
The question is: how do I make ionic not cut off the primary text in my list?
Thanks.
**UPDATE: **I have found the solution. I have added a css rule (min-width:75%) for ion-notes in an scss associated with a different page, but that somehow got applied to this page as well. Removing that CSS rule fixed the issue for me.
In your code you're using item-right class, however in the documentation as well as the demo source page, it is item-end.
Please check the item placement attributes here:
https://ionicframework.com/docs/api/components/item/Item/
If that doesn't help, you can try overriding the padding-right attribute of item-content.