No view refresh after copying items

Question

I have a code. It copies the content (of a certain view) after clicking on the button and then moves to another subpage where the copied items are. The problem is that the copied element is displayed only after the page is refreshed. Anyone can help me solve this mystery?

duplicate(){
this.landingPageService.getLandingPageItem(this.landingPageData.id).subscribe(
      next => {
        this.loading = true;
        const copiedLandingPage = LandingPage.LandingPageFromDefinition(next),
          copyLandingPage = LandingPage.GenerateCreationDTO(
            copiedLandingPage.content,
            `${copiedLandingPage.name} (copy)`
          );
        copyLandingPage.lpType = copiedLandingPage.lpType;
        copyLandingPage.lastUpgraded = copiedLandingPage.lastUpgraded;
        this.landingPageService
          .createLandingPageItem(copyLandingPage)
          .subscribe(
            () => {
              this.toastGenerator.lpContentCreation.success();
              this.refreshSubject.next();
            },
            () => {
              this.loading = false;
              this.toastGenerator.lpContentCreation.failure();
            }
          );
      },
      () => {
        this.toastGenerator.lpContentCreation.failure();
      }
    );
      this.router.navigate(['/landing-page']);
  }
<button  (click)="duplicate()">Kopiuj</button>

in angular don't update on live page since it is already loaded you should write this in event listener with ```any``` so it will update automatically — Vishal Pandey, Nov 03 '21 at 08:59
no i am talking about event listener wait i am pasting a code in answers — Vishal Pandey, Nov 03 '21 at 14:18

score 0 · Answer 1 · answered Nov 03 '21 at 14:25

let element = document.getElementById("Element-id");
    if (element) {
      element.addEventListener('scroll', (event) => {
        this.function(event);

function(event: any):void{
        this._rest.all(`/classrooms/`)
            .getList({ page: this.pageNumber+1, is_archived : false })
            .toPromise()
            .then((element) => {
              this.loadingElement = false
            }, (error) => {
              this.loadingElement = false;
              console.log("ERROR GETTING LIST", error);
          });
        }
      }

here in above code on any event performed on display like mouse moved, button clicked, hover, refresh anything it will automatically call the function and your page automatically show the data as you have given in function

for example above eventlistner will call function and function do its work as we directed it

you can see docs here

What do you mean? How does it relate to the question? In angular, you don't add event listeners with `addEventListener`. There are at least 3 better options like: `fromEvent`, `HostListener` (if event source should be attached to component - if not, still you can use it but you need to create directive and attach it to `HtmlElement`) or just as documentation says - by `EventBinding`. In angular, you can navigate but with `RouterModule` (router, routerLink, etc). Also - it's better to stick to `Obsevables` - they are more powerful (I am talking here about HTTP calls) — KamLar, Nov 05 '21 at 19:36
See I haven't added the part where I am applying event listener add for reference see this https://stackoverflow.com/questions/41609937/how-to-bind-event-listener-for-rendered-elements-in-angular-2 — Vishal Pandey, Nov 06 '21 at 01:08

No view refresh after copying items

1 Answers1