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>
Related
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
This is my parent component.
<div class="o-tile-container ">
<div *ngFor="let country of Countrys">
<app-country
[name]="name"
[count]="count"
[level]="'Country'"
></app-country>
</div>
</div>
This is my common country child component Html code
<div [matRippleColor]="primary" class="m-tile" matRipple>
<div class="a-tile-graph">
<div class="titles">
<div class="head" id="heading-name">{{name}}</div>
<div class="sub">{{level}}</div>
</div>
</div>
<div class="content-tile">
<div class="o-tile-content">
<div class="a-tile-title">{{name}}</div>
<div class="a-tile-count">{{count}}</div>
</div>
</div>
</div>
This kind of a thing.
In here i want to display heading-name in the same level of every tile and level country in a same level from top in every container. How can i do this?
To align text dynamically you can pass your style as #Input I have a sample code for you what exactly you want. Please check my code and demo code in stackblitz Demo LINK StackBlitz=>
** Parent HTML:**
<div class="o-tile-container ">
<div *ngFor="let country of Countrys">
<app-country
[name]="country.name"
[count]="country.count"
[level]="country.level"
[mystyle]="country.style"
></app-country>
</div>
</div>
Child HTML:
<div style="border-style: solid;width:100px" [matRippleColor]="primary" class="m-tile" matRipple [ngStyle]="this.mystyle">
<div class="a-tile-graph" >
<div class="titles">
<div class="head" id="heading-name" >{{name}} </div>
<div class="sub">{{level}}</div>
</div>
</div>
<div class="content-tile">
<div class="o-tile-content">
<div class="a-tile-title">{{name}}</div>
<div class="a-tile-count">{{count}}</div>
</div>
</div>
</div>
TS:
Parent TS:
export class AppComponent {
Countrys:any=[];
rippleColor: string = "white";
constructor(){
let c1=new Country();
c1.count=1;
c1.level='L1';
c1.name='A';
c1.style={'text-align':'center'}
this.Countrys.push(c1);
let c2=new Country();
c2.count=2;
c2.level='L2';
c2.name='B';
c2.style={'text-align':'right'};
this.Countrys.push(c2);
let c3=new Country();
c3.count=3;
c3.level='L3';
c3.name='C';
c3.style={'text-align':'left'};
this.Countrys.push(c3);
}
}
class Country{
name;string;
count:number;
level:string;
style:any;
}
Child TS:
export class CountryComponent implements OnInit {
#Input() level:string;
#Input() name:string;
#Input() count:number;
#Input() mystyle:any;
constructor() {
}
ngOnInit() {
}
}
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.
I am making a webpage where i fetch movies using an api and i am trying to list the movie posters using the materilize css card in the same row, but it only gets listed on top of each other as a column.
app.js
class App extends React.Component {
constructor(props) {
super(props);
this.state={};
this.performSearch()
}
performSearch(){
$.ajax({
url:urlString,
success:(searchResults) =>{
console.log("Feteched succesfully");
//console.log(searchResults);
const results = searchResults.results
//console.log(results[0])
const movieRows = [];
results.forEach((movie) =>{
// console.log(movie.title);
console.log(movie.poster_path)
const movieRow = <MovieLists movie={movie}/>
movieRows.push(movieRow);
})
this.setState({rows:movieRows})
},
error:(xhr,status,err) =>{
console.error("Failed to fetch");
}
})
}
render() {
return (
<div className="App">
{this.state.rows}
</div>
);
}
}
export default App;
MovieLists.js
<div className="container">
<div className="row">
<div className="col s12">
<Movie key ={props.movie.id} image={props.movie.poster_path}
title={props.movie.title}/>
</div>
</div>
</div>
Movie.js
<div className="col s12 m6 l3">
<div className="card" >
<div className="card-image waves-effect waves-block waves-dark">
{
props.image == null ?
<img src ={'https://www.google.com/url?sa=i&url=https%3A%2F%2Fmarket.ionicframework.com%2Fstarters%2Fomdb-search&psig=AOvVaw3Beb0rUUVxt3OsEfwzu07Q&ust=1585542435018000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCJj8kIPsvugCFQAAAAAdAAAAABAD'}
alt="card image"
style={{width:"100%",height:360}}/>
:
<img src ={`http://image.tmdb.org/t/p/w185${props.image}`}
alt="card image"
style={{width:"100%",height:360}}/>
}
<div className="card-content">
<p>
</p>
</div>
</div>
</div>
</div>
The movieLists component lists the movie component on top of each other, i am trying to find the way to list them horizontally responsively.
Remember to always use the correct grid structure, which is:
.container > .row > .col
All cols MUST sit in rows to behave responsively. Adding a .row div around the movie.js output will fix your problem.
<div class="container">
<div class="row">
<div class="col">
[content goes here]
</div>
<div class="col">
[content goes here]
</div>
</div>
</div>
See this answer from yesterday:
Materialize grid s12 not working in mobile view or on Chrome's developer tools
Codepen with a single .row div to fix your problem (note I've had to chnage className to class):
https://codepen.io/doughballs/pen/eYNbwOQ
https://materializecss.com/grid.html
I just want to add a tooltip to the element which is clicked.
Tooltip is added to all repeat elements when clicked. Please help me.
<div ng-repeat="item in listOfMenu" class="repeat_container">
<div ng-repeat="menu in item" class="repeat_block" ng-click="getTool(menu,menu.pricelist.length)" >
<div class="shadow img_cont">
<img src="{{menu.itemimage}}" class="item_img">
<div ng-repeat="innerItem in menu.pricelist | limitTo:1">
{{innerItem.itemprice}}
</div>
</div>
<div>
{{menu.menuitemname}}
</div>
<div ng-repeat="menu in addToCart" class="add_circle" ng-show="circle">
{{menu.quantity}}
</div>
</div>
</div>
Change the div in:
<div ng-repeat="menu in item" class="repeat_block" ng-click="getTool(menu,menu.pricelist.length)" ng-class="{'clicked': menu.clicked}">
In getTool method
menu.clicked = true;
but you should put clicked:false to all others menu in items