Angular 10 scrollTo from parent component to an element in child component html

Question

parent html:

 <div>
  <button type="button" (click)="scroll(childelementTwo)">TO CHILD</button>
 </div>

 <div>
  <app-child>
 </div>

child html:

 <div>
    <div #childelementOne>
      lot of stuff
    </div>

    <div #childelementTwo>
     another lot of stuff
    </div>

   </div>

if all this html code were in the "same" component.html I would use this function, but not:

  scroll(el: HTMLElement) {
    el.scrollIntoView();
 }

So: How can I scroll to an html element in child component ?

enno.void · Accepted Answer · 2020-09-10 18:45:31Z

2

You can use @ViewChildren for this.

List-Item:

@Component({
  selector: 'app-list-item',
  templateUrl: './list-item.component.html',
  styleUrls: ['./list-item.component.css']
})
export class ListItemComponent implements OnInit {

  @Input() list;

  constructor(private elRef: ElementRef) { }

  ngOnInit() {
  }

  scrollIntoView() {
    this.elRef.nativeElement.scrollIntoView();
  }

}

List-Component:

  @ViewChildren(ListItemComponent) viewChildren!: QueryList<ListItemComponent>;
  list = new Array(1000).fill(true)

  scrollTo() {
    this.viewChildren.toArray()[100].scrollIntoView()
  }

HTML:

<button (click)="scrollTo()">scroll to 100</button>
<app-list-item *ngFor="let item of list">
list works!
</app-list-item>

stackblitz: https://stackblitz.com/edit/angular-ivy-6ccaav?file=src%2Fapp%2Fapp.component.html

answered Sep 10, 2020 at 18:45

enno.void

6,6284 gold badges28 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

matQ Over a year ago

No, I am not using ngfor, div in child element contains different content

Dries Over a year ago

If scrollIntoView still does not work, try wrapping it in setTimeout. setTimeout(_ => whatever.nativeElement.scrollIntoView())

Eliseo · Accepted Answer · 2020-09-10 20:59:11Z

Mat, your "elements" are in child and you want control in parent. So, first make access to the elements in child using ViewChild

//in your child.component
@ViewChild("childelementOne") childelementOne;
@ViewChild("childelementTwo") childelementTwo;

Then in parent you can do

<div>
  <button type="button" (click)="scroll(childComponent.childelementTwo)">
       TO CHILD
   </button>
</div>

<div>
  <!--see that use a template reference variable to the childComponent-->
  <app-child #childComponent></app-child>
 </div>

 scroll(el: ElementRef) {
   el.nativeElement.scrollIntoView();
 }

See how, in the .html we are using childComponent.childelementTwo. childComponentis the own component app-child, childComponent.childelementTwo is the "variable" that we get in the @ViewChild. By defect is an ElementRef. You get to the HTMLElement using el.nativeElement. Yes, using a template reference we can access to all the public variables and public function of your child.component

I create a stackblitz that is looks like the stackblitz in enno's answer, but see that is complety different

NOTE. You can also use the same referenceVariable in the child.component and use ViewChildren, so you can pass to the function the QueryList and the index

Collectives™ on Stack Overflow

Angular 10 scrollTo from parent component to an element in child component html

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related