{"action":"created","issue":{"url":"https://api.github.com/repos/angular/angular/issues/11136","repository_url":"https://api.github.com/repos/angular/angular","labels_url":"https://api.github.com/repos/angular/angular/issues/11136/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular/issues/11136/comments","events_url":"https://api.github.com/repos/angular/angular/issues/11136/events","html_url":"https://github.com/angular/angular/issues/11136","id":173731183,"number":11136,"title":"*ngIf not reacting to change in decodeAudioData callback","user":{"login":"Torwori","id":4062236,"avatar_url":"https://avatars.githubusercontent.com/u/4062236?v=3","gravatar_id":"","url":"https://api.github.com/users/Torwori","html_url":"https://github.com/Torwori","followers_url":"https://api.github.com/users/Torwori/followers","following_url":"https://api.github.com/users/Torwori/following{/other_user}","gists_url":"https://api.github.com/users/Torwori/gists{/gist_id}","starred_url":"https://api.github.com/users/Torwori/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Torwori/subscriptions","organizations_url":"https://api.github.com/users/Torwori/orgs","repos_url":"https://api.github.com/users/Torwori/repos","events_url":"https://api.github.com/users/Torwori/events{/privacy}","received_events_url":"https://api.github.com/users/Torwori/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-08-29T09:15:53Z","updated_at":"2016-08-29T09:36:59Z","closed_at":null,"body":"**I'm submitting a ...**  (check one with \"x\")\r\n```\r\n[ x ] bug report => search github for a similar issue or PR before submitting\r\n[ ] feature request\r\n[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question\r\n```\r\n\r\n**Current behavior**\r\n```ts\r\n// service.ts\r\napiUrl: string = \"...\";\r\ntoken: string = \"...\";\r\n\r\ngetDataItem(urlPart: string, id: string, callback: any): void {\r\n        let oReq = new XMLHttpRequest();\r\n        oReq.open(\"GET\", `${this.apiUrl}api/${urlPart}/data/${id}`, true);\r\n        oReq.responseType = \"arraybuffer\";\r\n        oReq.setRequestHeader(\"Authorization\", `Bearer ${this.token}`);\r\n\r\n        oReq.onload = (oEvent) => {\r\n            let arrayBuffer = oReq.response;\r\n            callback(arrayBuffer);\r\n        };\r\n\r\n        oReq.send();\r\n}\r\n```\r\n```ts\r\n// audio.component.ts\r\nimport { Component, Input, OnInit, OnDestroy, Output } from \"@angular/core\";\r\nimport { Service } from \"./service\";\r\n\r\n@Component({\r\n    selector: \"audio-item\",\r\n    templateUrl: \"audio.component.html\"\r\n})\r\nexport class AudioItem implements OnInit, OnDestroy {\r\n    @Input() itemId: string;\r\n    @Input() type: string;\r\n\r\n    audioCtx: AudioContext = new AudioContext();\r\n    audioSource: AudioBufferSourceNode;\r\n\r\n    loading: boolean = true;\r\n\r\n    constructor(private _service: Service) {}\r\n\r\n    ngOnInit() {\r\n        this._service.getDataItem(`${this.type}Data`, this.itemId, this.parseResult);\r\n    }\r\n\r\n    ngOnDestroy() {\r\n        this.audioCtx.close();\r\n    }\r\n\r\n    parseResult = (result: ArrayBuffer) => {\r\n        this.audioSource = this.audioCtx.createBufferSource();\r\n        this.audioCtx.decodeAudioData(result, (buffer) => {\r\n            this.audioSource.buffer = buffer;\r\n            this.audioSource.connect(this.audioCtx.destination);\r\n            this.loading = false;\r\n        });\r\n    }\r\n\r\n    playAudio() {\r\n        this.audioSource.start(0);\r\n    }\r\n}\r\n```\r\n```html\r\n<i class=\"fa fa-play\" *ngIf=\"!loading\" (click)=\"playAudio()\"></i>\r\n<i class=\"fa fa-spinner spin\" *ngIf=\"loading\"></i>\r\n```\r\n\r\nI'm loading a .wav file into an arraybuffer and then decoding it. While the file hasn't loaded, I want to display a spinner.\r\n\r\nThe issue is that the `fa-play` icon never appears. I placed a breakpoint on the `this.loading = false` line and it does get called correctly.\r\n\r\n**Expected/desired behavior**\r\nSpinner disappears, play icon appears.\r\n\r\n**Reproduction of the problem**\r\nCan't provide one since I can't find a source for a .wav file that will allow me to make a request from plunkr.\r\n\r\n**Please tell us about your environment:**\r\n\r\n* **Angular version:** 2.0.0-rc.5\r\n \r\n* **Browser:** [Chrome 52.0.2743.116 (64-bit) | Firefox 47] \r\n \r\n* **Language:** [TypeScript 1.8.10] \r\n"},"comment":{"url":"https://api.github.com/repos/angular/angular/issues/comments/243079075","html_url":"https://github.com/angular/angular/issues/11136#issuecomment-243079075","issue_url":"https://api.github.com/repos/angular/angular/issues/11136","id":243079075,"user":{"login":"Torwori","id":4062236,"avatar_url":"https://avatars.githubusercontent.com/u/4062236?v=3","gravatar_id":"","url":"https://api.github.com/users/Torwori","html_url":"https://github.com/Torwori","followers_url":"https://api.github.com/users/Torwori/followers","following_url":"https://api.github.com/users/Torwori/following{/other_user}","gists_url":"https://api.github.com/users/Torwori/gists{/gist_id}","starred_url":"https://api.github.com/users/Torwori/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Torwori/subscriptions","organizations_url":"https://api.github.com/users/Torwori/orgs","repos_url":"https://api.github.com/users/Torwori/repos","events_url":"https://api.github.com/users/Torwori/events{/privacy}","received_events_url":"https://api.github.com/users/Torwori/received_events","type":"User","site_admin":false},"created_at":"2016-08-29T09:36:59Z","updated_at":"2016-08-29T09:36:59Z","body":"**Workarounds:**\r\n```ts\r\nthis.audioCtx.decodeAudioData(result, (buffer) => {\r\n    this.audioSource.buffer = buffer;\r\n    this.audioSource.connect(this.audioCtx.destination);\r\n});\r\nthis.loading = false;\r\n```\r\n```ts\r\nthis.audioCtx.decodeAudioData(result).then((buffer) => {\r\n    this.audioSource.buffer = buffer;\r\n    this.audioSource.connect(this.audioCtx.destination);\r\n    this.loading = false;\r\n});\r\n```\r\n\r\nNot sure why the original code doesn't work."}}
{"actor":{"display_login":"Torwori"}}