1

I have a ngx-slide-carousel in homecomponent.html,

  <div class="row p-4" id="sixtwo">
    <ngx-slick-carousel class="carousel" 
                            #slickModal="slick-carousel" 
                            [config]="slideConfig" >
            <div ngxSlickItem class="slide"  *ngFor="let slide of slides" >
     <div class="sixcont">      
              <img src="{{ slide.img }}" alt="" width="95%">
              <button type="button" class="btn btn-info btn-sm " data-toggle="modal" attr.data-target="{{slide.modelname}}">quick preview {{ slide.des}}</button>
            </div> 

               <h1>{{ slide.des}}</h1> <div class="fa fa-star checked"></div>
  <span class="fa fa-star checked"></span>
  <span class="fa fa-star checked"></span>
  <span class="fa fa-star checked"></span>
  <div class="fa fa-star checked"></div><br>
               <button type="button" class="btn btn-info btn-sm"  data-toggle="modal">Add to cart</button>
       </div>     
       
        </ngx-slick-carousel>
    </div>

and its array in homecomponent.ts like,

export class HomepageComponent implements OnInit {
 
  @ViewChild('carousel') carousel: any;
  
  
  constructor() {
   } 

  slides = [
    {img:"",des:"Soft Drinks",modelname:"#myModal",modelnameid:"myModal"},
    {img: "",des:"BOOKS",modelname:"#myModal2",modelnameid:"myModal2"},
    {img: "",des:"Cloths",modelname:"#myModal3",modelnameid:"myModal3"}
  // ...and so on...
  ];

  ];
slideConfig = {
    slidesToShow: 6,
    slidesToScroll: 1,
    arrows:true,
    dots:true,
    infinite: true,
    autoplay: true,
    autoplaySpeed: 8000,

    speed: 1500}


 ngOnInit(): void {
  }
 
  
}

and the model code inn home.compoent.html:

     <div  *ngFor="let slide of slides"  class="modal fade" id="{{slide.modelnameid}}" role="dialog">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
           
            <div class="modal-body">
              <div class="row"><div class="col-md-6">
              <h1>About This Product !!!!!!!!</h1>
              <img src="{{slide.img}}" >
                <br>
              </div><div class="col-md-6"  >
                <h1>About This Product !!!!!!!! {{slide.modelname}}</h1>
               



//this button click


                <button type="button"   data-dismiss="modal" routerLink="/aboutproduct" routerLinkActive="active" > Click to know about this product</button>
              </div></div></div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>

i need to open a component on button click (mentiond as //this btn click) with slide.des ,slide.img as data..

i tried <app-about [name]="slide.des"> in that model set of code..but it is opening that component in home component. i need to redirect to that about component with slide.des,slide.img ....as data.

Raghu raman
  • 45
  • 5
  • This might be a duplicate of [this](https://stackoverflow.com/questions/58771285/update-slider-component-data-from-any-other-component) – famoha Apr 05 '21 at 09:36
  • Also there are many ways you can achieve this task. Either use services and communicate between unrelated components through those, or use @Input decorator to get data from another component and store it in a variable and so on. – famoha Apr 05 '21 at 09:40
  • Alternatively you can also make a separate component for your slider. which then you can call whenever you need it. – famoha Apr 05 '21 at 09:41
  • i need to send value like but i need to redirect to that component instead of opening here – Raghu raman Apr 05 '21 at 10:12
  • then first inside the component you need to pass the data to (i assume its ), make a variable like this `@Input greetMessage; ` then you mentioned a "button". for that button add a method (or if you have already a method for it). navigate to the component you want to redirect to using `Router.navigate()` (you have to inject Router in your constructor inside the component). That way you get the data and you also open it in the place you want. – famoha Apr 05 '21 at 10:26
  • any demo code or existing example please...im new to angular...(crying emoji) – Raghu raman Apr 05 '21 at 10:54
  • 1
    i have made a simple project as an example. I did not use @Input() decorator because you are doing a navigation to another component that is unrelated to the current component, i would suggest you use routerlink approach where you send the information you need via url params and get the information from the url params inside the other component. There are many more approaches to do this of course but i chose this approach. example: https://stackblitz.com/edit/angular-ivy-5jfrfa? – famoha Apr 05 '21 at 12:10
  • Thanks a lot ! That was well explained and easily understood. – Raghu raman Apr 05 '21 at 13:32
  • you're welcome :) i hope that helps you with the task. – famoha Apr 05 '21 at 14:19

0 Answers0