Access functions in Angular 7

Question

In my Component class (HeaderComponent), I want to access the changeBtnColorBg function everytime I click the two functions changeBannerArrow() and changeBannerImg()

Those functions are triggered on the onclick event in the HTML side

export class HeaderComponent implements OnInit {
    imgTotal = 3;
    currentImg = 0;

    imgHdr = [];

    changeBannerImg(imgSelect){
        /* some code here */
        changeBtnColorBg(this.currentImg, imgSelect);
    }


    changeBannerArrow(imgSelect){
        from = this.currentImg;

        /* some code here*/
        to = this.currentImg;

        changeBtnColorBg(from, to);

    }

    changeBtnColorBg(from, to){
        this.imgHdr[from].selected = false; //change back to transparent

        this.imgHdr[to].selected = true; //change bg color
    }
}

But this structure produces an error of

HeaderComponent.html:15 ERROR ReferenceError: changeBtnColorBg is not defined

Can someone please help? I'm new to this

wow, Angular 7 requires no TypeScript?

Yang
– Yang

2018-10-25 10:16:09 +00:00
Commented Oct 25, 2018 at 10:16 — Yang
– Yang, Commented Oct 25, 2018 at 10:16

SMH · Accepted Answer · 2018-10-25 09:47:35Z

1

Seems you missed the this in your changeBannerArrow and changeBannerImg methods

  changeBannerArrow(imgSelect){
        from = this.currentImg;

        /* some code here*/
        to = this.currentImg;

        this.changeBtnColorBg(from, to);
}


   changeBannerImg(imgSelect){
        /* some code here */
        this.changeBtnColorBg(this.currentImg, imgSelect);
    }

edited Oct 25, 2018 at 9:47

answered Oct 25, 2018 at 9:45

SMH

1,0993 gold badges15 silver badges32 bronze badges

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

1 Comment

mengmeng Over a year ago

Hello! Thanks for this! I figured it out a couple of seconds ago that the command line also displays an error (new to this) Thanks for this!

Franklin Pious · Accepted Answer · 2018-10-25 09:44:10Z

1

changeBtnColorBg(this.currentImg, imgSelect);

to

this.changeBtnColorBg(this.currentImg, imgSelect); // add 'this'

answered Oct 25, 2018 at 9:44

Franklin Pious

3,9083 gold badges29 silver badges31 bronze badges

Comments

Sarthak Aggarwal · Accepted Answer · 2018-10-25 09:42:49Z

0

try and Make the following changes :

export class HeaderComponent implements OnInit {
imgTotal = 3;
currentImg = 0;

imgHdr = [];

changeBannerImg(imgSelect){
    /* some code here */
    this.changeBtnColorBg(this.currentImg, imgSelect); // make change here
}


changeBannerArrow(imgSelect){
    from = this.currentImg;

    /* some code here*/
    to = this.currentImg;

    this.changeBtnColorBg(from, to); // make change here

}

changeBtnColorBg(from, to){
    this.imgHdr[from].selected = false; //change back to transparent

    this.imgHdr[to].selected = true; //change bg color
}

}

answered Oct 25, 2018 at 9:42

Sarthak Aggarwal

2,3121 gold badge10 silver badges12 bronze badges

Collectives™ on Stack Overflow

Access functions in Angular 7

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related