I'm building a reusable component that will take sensitive data and include a toggle to show/hide that data. Hidden data is replaced with a PrimeNG skeleton. The problem I'm trying to solve is that if the <ng-content> is empty, I'd rather just show a - than the skeleton to prevent having to toggle it, just to find no data.
<ng-container *ngIf="dataIsMasked; then maskData else showData"></ng-container>
<ng-template #maskData>
<span class="skeleton-container">
<p-skeleton></p-skeleton>
</span>
<span class="no-data-placeholder"> - </span>
</ng-template>
<ng-template #showData>
<span class="data-mask-container">
<ng-content></ng-content>
</span>
</ng-template>
..code to toggle button & component variable...
I'm attempting to use some CSS selectors to determine if the content is empty or not, but on instances where the .data-container is empty, the styles aren't applied to .skeleton-container:
.data-container:empty + .skeleton-container {
display: none;
}
Related
I am using Primeng v11.x in my Angular 11 application. For some reason the option items are not highlighting when i used keyboard arrows to select an option item from the dropdown list
<p-dropdown
#dropdown
[options]="options"
optionLabel="name"
dropdownIcon="fas fa-caret-down"
[(ngModel)]="value"
(onChange)="onValueChange()"
[placeholder]="placeholderText"
[disabled]="disabled || readonly"
[autoDisplayFirst]="config?.autoDisplayFirst"
[resetFilterOnHide]="true"
(onFocus)="onFocusHandler()"
>
<ng-template let-option pTemplate="item">
<span class="truncate-option-text">{{ option?.name }}</span>
</ng-template>
</p-dropdown>
Can anyone point me what am i doing wrong here and why it is not highlighting as it is shown in primeng documentation? https://www.primefaces.org/primeng-v11-lts/#/dropdown
I'm using angular calendar, and I want to customize the events style,for example- to change their shape to square instead of circle.
I tried this code:
<mwl-calendar-month-view [eventTitleTemplate]="customEventsStyle" [locale]="locale" [viewDate]="viewDate" [events]="events" (dayClicked)="dayClicked($event.day)" (eventClicked)="eventClick($event)">
{{ viewDate | calendarDate:(view + 'ViewTitle'):'Es' }}
</mwl-calendar-month-view>
<ng-template #customEventsStyle let-event="event">
<div class="cal-events">
<p style="background-color: brown;">{{event.title}}</p>
</div>
</ng-template>
But it didn't change anything in the style.
I also tried to change the css file in this path:
"../node_modules/angular-calendar/css/angular-calendar.css"
I changed the style of the .cal-month-view .cal-event class, but nothing happend.
I'm new for this issue, I'll be thankful if you could help me.
Thank you
I found it out!
I just added this code into the custom template instead of the div:
<ng-template #customCellTemplate let-day="day">
<mat-list *ngFor="let e of day.events">
<button class="customEvent" (click)="eventClick(e)">
{{e.title}}
</button>
</mat-list>
</ng-template>
<mwl-calendar-month-view [cellTemplate]="customCellTemplate"> ect...
Thanks
Here is my checkbox in angular and i want to prevent the default behaviour of it.
<mat-checkbox (change)="changeSelectionTo()" [(ngModel)]="isChangeRule">Name</mat-checkbox>
Here whenever i click on name label...the checkbox gets toggled which i do not want to..
How can i prevent this from toggling when click on label . I have tried all others post too but I could not come up with the solution . I can not use jQuery.
Based on #Mike S. comment:
<mat-checkbox (change)="changeSelectionTo()" [(ngModel)]="isChangeRule">
<span (click)="myCheck($event)">Name</span>
</mat-checkbox>
in your component typescript code:
myCheck(event) {
event.preventDefault();
//YOUR LOGIC
}
you need to add label after completing the <mat-checkbox> tag.
According to your design, you can add style to the <mat-label>
Replace your line of code with the below shown code:
<div layout=row>
<mat-checkbox (change)="changeSelectionTo()" [(ngModel)]="isChangeRule"></mat-checkbox>
<mat-label> Name </mat-lable>
</div>
above image is generated by below code
<div align="left" class="user-modified-rule">
<div layout="row">
<mat-checkbox (change)="changeSelectionTo()" [(ngModel)]="isChangeRule">
</mat-checkbox>
<mat-label>
<rule></rule>
</mat-label>
</div>
</div>
and css code
.user-modified-rule {
display: inline-block;
width : 48%;
}
I am trying to click a button using Selenium.
Below is the code
<div class="ui-dialog-buttonset">
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false">
<span class="ui-button-text"> … </span>
</button>
I tried to do this by the css selector:
clickbutton=driver.find_element_by_css_selector("button.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only")
**My error: Unable to locate element: { method: "css selector","selector":"button.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only"} **
Am I approaching this wrong? Im not understanding the error. Shoud I use another Locator?
Your css selector is ok the problem is related to html code which setting aria-disabled="false" for compability. For Web3 documentation it means that related element and descandent are active but in your case it is not working.
Simple you can set the aria-disabled="true" then you can interact with the button but even you set it back to false it still works. To change the button attribute, you can use execute_script. Alternative to your css you use this css too: .ui-dialog-buttonset > button
>>> dr.find_element_by_css_selector(".ui-dialog-buttonset > button").get_attribute("aria-disabled")
u'false'
>>> dr.execute_script('document.querySelector(".ui-dialog-buttonset > button").setAttribute("aria-disabled", true)')
>>> dr.find_element_by_css_selector(".ui-dialog-buttonset > button").get_attribute("aria-disabled")
u'true'
>>> dr.find_element_by_css_selector(".ui-dialog-buttonset > button").click()
I'm using the small module Link Badges to display a badge with the amount of flagged nodes next to a link to the View in question. It works great and I've styled the badge to my needs. This is the current HTML code:
<a class="menu__link menu__link link-badge-wrapper">
<span class="link-badge-text">My View</span>
<span class="link-badge-badge-wrapper">
<span class="link-badge link-badge-menu_badges_execute_view">0</span>
</span>
</a>
Now, I'd like to display the badge a little bit differently (other colors etc.) when the value is 0. I thought about doing this by adding a new CSS class link-badge-zero to the value.
<a class="menu__link menu__link link-badge-wrapper">
<span class="link-badge-text">My View</span>
<span class="link-badge-badge-wrapper">
<span class="link-badge link-badge-zero link-badge-menu_badges_execute_view">0</span>
</span>
</a>
How can I achieve this?
If you just want to add a class if the value inside your span is "0", give this a try
JQuery:
if($(".link-badge").text() == "0"){
$(".link-badge").addClass("link-badge-zero");
}
Here is a fiddle