I have a real problem to change some simple css with Angular and css.
I have the code:
<div class="progress">
<div class="progress-bar progress-bar-info" ng-class="stepOne">1</div>
<div class="progress-bar progress-bar-info" ng-class="stepTwo">2</div>
<div class="progress-bar progress-bar-info" ng-class="stepTree">3</div>
</div>
<div class="well col-lg-12">
<applystepone ng-if="step.one"></applystepone> <!-- this is my directive -->
<applysteptwo ng-if="step.two"></applysteptwo>
<applysteptree ng-if="step.tree"></applysteptree>
</div>
In the directive : applystepone i have a button. If I click on the button i want the css of the progress bar change for ng-class="stepOne"
The button in the directive :
<div class="col-lg-12 text-center">
<a class="btn btn-primary" ng-click="steptwo(); stepOne='valide-step'">Next step</a>
</div>
And the directive :
app.directive('applystepone', function() {
return {
restrict: 'E',
templateUrl: 'partials/apply-step-one.html'
};
});
If i click on the button, nothing append to the
ng-class="stepOne"
If i place in the apply-step-one.html
<p ng-class="stepOne">Test </p>
The css works, so the button works fine. I suppose it's because my ng-click is in the directive and not the ng-class="stepOne".
Not 100% sure I understood the whole thing, but here it goes.
I think you should consider modifying your CSS (which you haven't shown, btw) and the code slightly:
<div class="progress">
<div class="progress-bar progress-bar-info" ng-class="{active: step.one}">1</div>
<div class="progress-bar progress-bar-info" ng-class="{active: step.two}">2</div>
<div class="progress-bar progress-bar-info" ng-class="{active: step.three}">3</div>
</div>
This would trigger the active class on your progress bar based on the step in scope.
Then, instead of
<p ng-class="stepOne">Test </p>
you should probably use something more generic like:
<p class="button">Test </p>
and modify the CSS to trigger it, for example:
.well p.button {
color: green;
}
And if you just want to modify the class of the button, it's simple:
<p ng-class="{'stepOne': step.one, 'stepTwo': step.two, 'stepThree': step.three}">Test </p>
It's similar to what I described above, for the progress bar divs.
Try:
<a class="btn btn-primary" ng-click="steptwo(); $parent.stepOne='valide-step'">Next step</a>
$parent will retrieve the parent scope from inside your directive.
Related
I needed to add a span to my HTML with an ID to be able to go to it after clicking Reply button. I needed it only for the last element on the page. It works but I'm getting 2 errors in the console. Could anyone tell me what have I done wrong and how can I get rid of them?
<div class="comment">
<app-user-image></app-user-image>
<div class="position-relative d-inline-block flex-fill">
<div class="d-flex justify-content-between align-items-center">
<div><strong>{{comment.author.name}} / {{comment.author.id}}</strong><span
class="date">{{comment.created | krakenDateTime}}</span></div>
<div class="actions">
<button *ngIf="this.hateoas.supports(comment, 'update') && !edit"
type="button" class="bg-transparent border-0" title="Edit"
(click)="toggleEdit()"><i class="icon-kraken icon-kraken-edit"></i></button>
<button *ngIf="this.hateoas.supports(comment, 'delete')"
type="button" class="bg-transparent border-0" title="Delete"
(click)="displayDeletionConfirmation()"><i class="icon-kraken icon-kraken-trash"></i></button>
</div>
</div>
<textarea *ngIf="edit; else readonlyComment"
#textarea
class="d-block w-100"
style="min-height: 7rem;"
[rows]="rows()"
[(ngModel)]="commentContent"></textarea>
<ng-template #readonlyComment>
<div [innerHTML]="commentContentHtml()"></div>
</ng-template>
<strong *ngIf="showReplyButton"
class="reply-button"
(click)="toggleReplyComponent()">Reply</strong>
</div>
here is the onInit method but I have not touched it
ngOnInit(): void {
if (this.comment) {
this.textArea.nativeElement.focus()
}
}
I'm presuming textArea is a #ViewChild reading the #textarea ref
That textarea component is in an ngIf, so it won't be available during ngOnInit
Also, the ngIf specifically removes the textarea if the comment is displayed - so your logic seems a bit off
<textarea *ngIf="edit; else readonlyComment" ...>
I am loading cards and there modals dynamically and the problem I am facing is that the dynamically added cards aren't triggering the dynamically added modals.
The cards are this
data.forEach(eve => {
console.log(eve.data());
event = eve.data();
pastEventCards+=`
<li class="cards_item">
<div class="card">
<div class="card_image">
<img src="images/posters/cpp_2021.jpeg" />
</div>
<div class="card_content card-body d-flex flex-column">
<h2 class="card_title">${event.title}</h2>
<p class="card_text">
</p>
**<button data-modal-trigger="past-event-modal-${event.eventNo}" class="mt-auto demo__btn demo__btn--secondary">
Read More
</button>**
</div>
</div>
</li>
`
pastEventModals+=`
<div class="modal" data-modal-name="past-event-modal-${event.eventNo}">
<div class="modal__dialog">
<button class="modal__close" data-modal-dismiss>×</button>
<header class="modal__header">
<h2 class="modal__title">${event.title}</h2>
</header>
<div class="modal__content">
<h4 class="modal_description">Description</h4>
</p>
<p>${event.description}</p>
<p class="modal_description">
${event.date}
</p>
<p class="modal_description">Attendees : ${event.attendee}
</p>
<p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-modal-dismiss>Close</button>
</div>
</div>
</div>
`
});
cardsList.innerHTML = pastEventCards ;
modalList.innerHTML = pastEventModals ;
I have tried referring to other stack overflow questions related to this and couldnt find a understandable solution to why this is happening , can anyone tell why the buttons cant trigger the modals ?
**EDIT :: **
The button that triggers the modal is inside this ** ** in the pastEventCards variable and the modal is in pastEventModals and when i use "data-modal-trigger = "something" " it will trigger the modal with modal name "something" right ? So y isnt it happening. If I dont add this modals and trigger cards dynamically and add it in the html template then it works fine but after adding dynamically it doesnt work
I have the following HTML code in my landing page
<div class="col-12 text-center mt-4 mb-4">
<a class="btn know-more-btn text" href="#billing">Tell Me More</a>
</div>
<div id="billing" class="billing-section">
//show some billing options
</div>
when clicking on btn know-more-btn for the first time the screen flickers and nothing happens only from the second click it "jumps" to the right location on the page (the billing section)
Not sure why this happens
Also is there a way to turn the "jump" into simulation of fast scroll to that section
Try this
html
<div class="col-12 text-center mt-4 mb-4" (click)="toSec()">
<a class="btn know-more-btn text">Tell Me More</a>
</div>
ts
toSec() {
document.getElementById("billing").scrollIntoView();
}
for smooth scrolling adding this to main style file
css
html {
scroll-behavior: smooth;
}
this will not work will with the router Tell Me More ,it will trigger the router to redirect to some page or reload the page.
so one way to solve it by useing template variable and call scrollIntoView method to apply scrolling.
<div class="basic c-pointer col-12 text-center mt-4 mb-4">
<a class="btn know-more-btn text"
(click)="billingElm.scrollIntoView({behavior: 'smooth'})" >
Tell Me More 👇
</a>
</div>
<div #billingElm class="billing-section">
//show some billing options
</div>
stackblitz demo 🚀🚀
for reusability this the directive way
#Directive({
selector: '[scrollTo]'
})
export class ScrollToDirective {
#Input('scrollTo') elm:HTMLElement;
#HostListener('click') onClick(){
if(this.elm){
this.elm.scrollIntoView({behavior:'smooth'});
}
}
}
template
<div class="col-12 text-center mt-4 mb-4">
<a class="btn know-more-btn text" [scrollTo]="billingElm" >Tell Me More 👇</a>
</div>
<div #billingElm class="billing-section">
//show some billing options
</div>
stackblitz demo 🌟🌟
check this Passive Link in Angular 2 - equivalent to
get more details about how this problem.
my landing page component declares in it a header component like so
<div class="container-fluid">
<div class="intro-section">
<div class="background">
//some stuff
</div>
<div class="content">
<app-page-header></app-page-header>
<div class="row">
<div class="col-12 text header mt-3">
Hello World
</div>
<div class="col-12 text-center mt-4 mb-4">
<button class="btn know-more-btn text" (click)="scroll(subscriptions)">Tell me More</button>
</div>
</div>
</div>
</div>
<div #subscriptions></div>
<div id="others" class="otherSection">
//other stuff
</div>
</div>
the scroll function in landing-page.component.ts is
scroll(el: HTMLElement) {
el.scrollIntoView({behavior:"smooth"});
}
I've also tried this
scrolling() {
(document.getElementById('others')).scrollIntoView({behavior:"smooth"});
}
I want to have a button in my app-page-header component that triggers or perform the same action an "scroll(subscriptions)" i.e in the landing page scroll to subscriptions. How can I achieve this?
Create an EventEmitter inside you app-page-header like
#Output() onButtonClicked: EventEmitter<any> = new EventEmitter();
The button in your app-page-header will emit the action to the parent component like:
buttonClicked() {
onButtonClicked.emit();
}
On your landing page add this to call the scroll function whenever the event is emitted.
<app-page-header (onButtonClicked)="scroll(subscriptions)"></app-page-header>
So I am trying to put a progress bar and a button in a button in the same line but for some reason, it doesn't work
<button type="button" class="btn btn-primary text-nowrap" style="white-space:nowrap;">
cpu usage procentage: <span class="badge badge-light live text-nowrap" id ="cpu" style="white-space:nowrap;">{{computer.cpu_usage_procentage}}</span>
</button>
<div class="progress">
<div id="cpu-progress" class="progress-bar bg-danger" role="progressbar" style="width: {{computer.cpu_usage_procentage}}%" aria-valuenow="{{computer.cpu_usage_procentage}}" aria-valuemin="0" aria-valuemax="100">{{computer.cpu_usage_procentage}}</div>
</div>
What I want is them to be in the same line instead of different lines so I saw that white-space:nowrap; should do the work but for some reason, it still doesn't work
white-space relates to text wrapping. this is two elements.
add this to the css:
.progress {
display: inline-block;
}