I am new to Angular, and I am trying to style items after the 6th child but it doesn't work. I can color everything, but when I add the nth-child part it doesn't work. Do I have a wrong syntax?
[ngStyle] = "div:nth-child(n+6){'background-color': 'red'}"
<p *ngIf = "status"> Secret Password is Tuna</p>
<div *ngFor="let clickLog of clickLogs"
[ngStyle]="div:nth-child(n+6){{'background-color': 'red'}}">
{{clickLog}}
</div>
<button (click)="clickEvent()">Show Details</button>
<button [disabled]="!checkIfEmty()" (click)="resetUserName()">Reser Username</button>
</div>
You can use pseudo class in the component CSS file.
app.component.css
div:nth-child(n+6) {
background-color: red
}
But you should have proper structure for it in template.
Or you can use index of ngFor.
app.component.ts
<div *ngFor="let clickLog of clickLogs; index as i"
[ngStyle]="{'background-color': i >= 6 ? 'red' : '' }">
{{clickLog}}
</div>
Related
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
i am trying to change a css variable using a component but for some reason it doesn't work, any help ?
//work but i dont want to use the property background
<div class="planete" [ngStyle]="{'background': planete.planeteBackgroundColor }"></div>
/* this is what i'd like to do :
.SCSS
$my-var
/*...*/
background: $my-var;
HTLM:
// does not work
<div class="planete" [ngStyle]="{'$my-var': planete.planeteBackgroundColor }">
// second option:
.SCSS
--my-var
/*...*/
background: var(--my-var)
HTLM:
// does not work
<div class="planete" [ngStyle]="{'--my-var': planete.planeteBackgroundColor }">
Thanks for the reply
Have you tried?
<div class="planete" [ngStyle]="{'background': var(planeteBackgroundColor) }">
.SCSS
planeteBackgroundColor='FFFFFF'
But the easieast way to build dynamic theme should be:
<div class="planete" [ngStyle]="{'background': planeteBackgroundColor }">
and define variable in your component ts file:
planeteBackgroundColor='FFFFFF'
There is a question just like this, but the answer wasn't very clear and I don't have enough "points" to comment on it.
I read https://react-bootstrap.github.io/components/buttons/ and some other documents but am unable to find my answer.
I used this article as my guide: https://www.pluralsight.com/guides/how-to-position-react-bootstrap-popover
import Popover from 'react-bootstrap/Popover';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Button from 'react-bootstrap/Button';
.
.
.
render() {
const popover = (
<Popover id="popover-basic">
<Popover.Title as="h3">Popover title</Popover.Title>
<Popover.Content>
Popover content <strong>some strong content</strong> Normal content again
</Popover.Content>
</Popover>
);
return (
<div className='toggle container '>
<div className='form-row justify-content-center'>
<div className='col-6'>
<section class='inline-block'>
<span class="badge badge-pill badge-primary ml-2">1</span>
<h3>
Choose System Type:
</h3>
<div id="element1">
<OverlayTrigger trigger="hover" placement="right" overlay={popover}>
<Button variant="outline-primary" circle><i class="fas fa-question"></i></Button>
</OverlayTrigger>
</div>
</section>
</div>
</div>
</div>
I'd like my popover button to be a circle, but I can't find documentation on how to do that.
Can someone explicitly help me using the ? Perhaps something else? Examples help immensely. Here is a screenshot of what it looks like now...
You can set className="rounded-circle" to your button component and it will be circle.
More about similar border classes:
Bootstrap documentation
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 create a custom inline style for each div section mentioned in the code below. The primary reason is to scale the images down accordingly using css. I created a prop object and passed data through the array. However is there any way i can pass the style through the array of props?
I have tried to implement the styles using the array as the same way for the other props. However cant implement and dont really know how this works since I am quite new to the react prop system.
The div i am trying to map
<div className= "row text-center text-md-left">
{
teamData.members && teamData.members.map((item) => {
return (
<div className="col-xl-6 col-lg-12 mb-5 d-md-flex justify-content-between">
<div className="avatar mb-md-0 mb-4 mx-4 team" style = {{ width: "80%", height: "100%" }}>
<img src={require(`./img/${item.image}.jpg`)} className="rounded z-depth-1" style = {{ width: "100%", height: "100%" }} alt="avatar"/>
</div>
<div className="mx-4">
<h4 className="font-weight-bold mb-3">{item.name}</h4>
<h6 className="font-weight-bold grey-text mb-3">{item.role}</h6>
<p className="grey-text">{item.description}</p>
</div>
</div>
)
})
}
</div>
The prop i am trying to pass is in the component
let teamData = {
"members" : [
{
"name": "XYZ",
"role": "XYZ",
"description": "ZYX",
"image": 'ZYX',
}
]
}
Now is there any way i can pass the custom style for each prop using style as props in the teamData prop and map onto each component. Any kind of help towards the prop system is also appreciated if the solution cant be provided. Thanks!
my guess is you want to pass style props to your components.So just pass the style object from main component and use it in style statement of your children component.
for ex:if i wanna sent blue color style to a component i will do
<Signin styless={{'color':'blue'}} />
in the main app and in the children component
const styles=this.props.styless
<input style={styles} >
this will apply reqired style to your components.hope this helps.