2

I am using intro.js library in angular 8. Everything working fine, but on this step I am stuck. I am not able to bind value in data-intro in this button tag. Actually "introForShowHide" is basically a text which i send from my component.ts file.

Can anyone help me in resolving this issue, how i can bind value in data-intro.

<button type="button" data-step="1" [data-intro]="introForShowHide" data-position="right">Demo </button>

Shlok Nangia
  • 2,355
  • 3
  • 16
  • 24
Archana
  • 21
  • 1

1 Answers1

1

write like that

<button type="button"(click)="howResourceDescription()"  data-step="1"[attr.data-intro]="introForShowHide"  data-position="right">Demo </button>

put your function into its component.ts

howResourceDescription() { 
    this.introForShowHide = "Click on hide instructions button to hide instructions displayed corresponding to enabling each resource type." 
 }
mr. pc_coder
  • 16,412
  • 3
  • 32
  • 54
  • I had tired this also but getting same error message Can't bind to 'intro' since it isn't a known property of 'button'. – Archana Apr 16 '20 at 12:21
  • Demo I have add this [attr.data-intro]="introForShowHide" but the problem is this when I click on this button then introduction text must be changed which i am changing after calling this showResourceDescription() function. – Archana Apr 16 '20 at 13:12
  • Every time it only show the text which is fixed or remain unchanged after calling this showResourceDescription() function. The purpose of using binding is to change the text when I call this function showResourceDescription(). – Archana Apr 16 '20 at 13:13
  • Put your function that changes text im question – mr. pc_coder Apr 16 '20 at 13:14
  • // Before constructor when declare this variable `introForShowHide = "You can click on Show Instructions button to see action corresponding to enabling each resource";` // After calling showResourceDescription() function `showResourceDescription() { this.introForShowHide = "Click on hide instructions button to hide instructions displayed corresponding to enabling each resource type." }` – Archana Apr 16 '20 at 13:26
  • Hi, It is not changing any text. Please use intro.js library, it show step 1 with initial data-intro value but when i click on this button then data-intro must be changed. – Archana Apr 16 '20 at 14:33
  • Bu there is no click event in this button. If u want to fire your action by clicking this button then u need to ad click event. I edited answer – mr. pc_coder Apr 16 '20 at 15:28
  • `` I am using click event without using click event how I can call a function. – Archana Apr 16 '20 at 16:39
  • put your function to your component.ts – mr. pc_coder Apr 16 '20 at 16:43
  • https://stackblitz.com/edit/angular-5tslbv u can check here where function is – mr. pc_coder Apr 16 '20 at 16:44
  • Hi Cagri, ofcourse this function is in its component.ts file. `showResourceDescription() { this.introForShowHide = "Click on hide instructions button to hidee." }` – Archana Apr 17 '20 at 06:40
  • I added also Demo2 button which is not using click event. It is using dom js to detect click u can check https://stackblitz.com/edit/angular-5tslbv again to see it – mr. pc_coder Apr 17 '20 at 06:45
  • Thak you Cagri !! – Archana Apr 20 '20 at 11:43