{"action":"created","issue":{"url":"https://api.github.com/repos/ng-bootstrap/ng-bootstrap/issues/2437","repository_url":"https://api.github.com/repos/ng-bootstrap/ng-bootstrap","labels_url":"https://api.github.com/repos/ng-bootstrap/ng-bootstrap/issues/2437/labels{/name}","comments_url":"https://api.github.com/repos/ng-bootstrap/ng-bootstrap/issues/2437/comments","events_url":"https://api.github.com/repos/ng-bootstrap/ng-bootstrap/issues/2437/events","html_url":"https://github.com/ng-bootstrap/ng-bootstrap/issues/2437","id":329954265,"node_id":"MDU6SXNzdWUzMjk5NTQyNjU=","number":2437,"title":"NgbTypeahead does not display suggestions within `ng-template`","user":{"login":"shantanoo-desai","id":12070966,"node_id":"MDQ6VXNlcjEyMDcwOTY2","avatar_url":"https://avatars1.githubusercontent.com/u/12070966?v=4","gravatar_id":"","url":"https://api.github.com/users/shantanoo-desai","html_url":"https://github.com/shantanoo-desai","followers_url":"https://api.github.com/users/shantanoo-desai/followers","following_url":"https://api.github.com/users/shantanoo-desai/following{/other_user}","gists_url":"https://api.github.com/users/shantanoo-desai/gists{/gist_id}","starred_url":"https://api.github.com/users/shantanoo-desai/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/shantanoo-desai/subscriptions","organizations_url":"https://api.github.com/users/shantanoo-desai/orgs","repos_url":"https://api.github.com/users/shantanoo-desai/repos","events_url":"https://api.github.com/users/shantanoo-desai/events{/privacy}","received_events_url":"https://api.github.com/users/shantanoo-desai/received_events","type":"User","site_admin":false},"labels":[{"id":260884034,"node_id":"MDU6TGFiZWwyNjA4ODQwMzQ=","url":"https://api.github.com/repos/ng-bootstrap/ng-bootstrap/labels/needs:%20plunkr","name":"needs: plunkr","color":"eb6420","default":false}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":{"url":"https://api.github.com/repos/ng-bootstrap/ng-bootstrap/milestones/3","html_url":"https://github.com/ng-bootstrap/ng-bootstrap/milestone/3","labels_url":"https://api.github.com/repos/ng-bootstrap/ng-bootstrap/milestones/3/labels","id":1317594,"node_id":"MDk6TWlsZXN0b25lMTMxNzU5NA==","number":3,"title":"Purgatory","description":"","creator":{"login":"wesleycho","id":1703387,"node_id":"MDQ6VXNlcjE3MDMzODc=","avatar_url":"https://avatars1.githubusercontent.com/u/1703387?v=4","gravatar_id":"","url":"https://api.github.com/users/wesleycho","html_url":"https://github.com/wesleycho","followers_url":"https://api.github.com/users/wesleycho/followers","following_url":"https://api.github.com/users/wesleycho/following{/other_user}","gists_url":"https://api.github.com/users/wesleycho/gists{/gist_id}","starred_url":"https://api.github.com/users/wesleycho/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wesleycho/subscriptions","organizations_url":"https://api.github.com/users/wesleycho/orgs","repos_url":"https://api.github.com/users/wesleycho/repos","events_url":"https://api.github.com/users/wesleycho/events{/privacy}","received_events_url":"https://api.github.com/users/wesleycho/received_events","type":"User","site_admin":false},"open_issues":1,"closed_issues":146,"state":"open","created_at":"2015-09-22T00:38:33Z","updated_at":"2018-06-08T18:00:21Z","due_on":null,"closed_at":null},"comments":5,"created_at":"2018-06-06T17:02:11Z","updated_at":"2018-06-08T18:00:21Z","closed_at":"2018-06-08T18:00:20Z","author_association":"NONE","body":"### Bug description:\r\n\r\n`<ng-template>` does not render for `ngbTypeAhead` module. Hence, no suggestions are available for display.\r\n\r\nMy Application tries to put a search bar within Bootstrap's `card` and should provide autocomplete suggestion as mentioned in the examples for __Template for Results__.\r\n\r\n#### Layout\r\n\r\n![grafik](https://user-images.githubusercontent.com/12070966/41052696-cb3a8e2c-69b9-11e8-9638-d537f1a153e0.png)\r\n\r\n#### component.html\r\n```\r\n              <div class=\"card\">\r\n                    <div class=\"card-header\">Available Properties</div>\r\n                    <div class=\"card-block\">\r\n                        <div class=\"input-group\">\r\n                            <label for=\"typeahead-template\" class=\"input-group-addon\"><span>Search</span></label>\r\n                            <input id=\"typeahead-template\"\r\n                                   type=\"text\"\r\n                                   class=\"form-control\"\r\n                                   [(ngModel)]=\"searchModel\"\r\n                                   [ngbTypeahead]=\"search\" [resultTemplate]=\"rt\" [inputFormatter]=\"formatter\"/>\r\n\r\n                            <ng-template #rt let-r=\"result\" let-t=\"term\">\r\n                                    {{ r.translatedProperty}}\r\n                            </ng-template>\r\n                        </div>\r\n                        <br>\r\n                        <br>\r\n                    <select size=\"10\" class=\"form-control mr-4\">\r\n                           <!-- code removed for brevity-->\r\n                    </select>\r\n                </div>\r\n```\r\n\r\n#### component.ts\r\n\r\n```\r\nexport class ExplorativeSearchSemanticComponent implements OnChanges {\r\n    public propertyResults: any[] = [];\r\n    public searchModel = {};\r\n\r\n   // Autocompletion Implementation from NG-BOOTSTRAP\r\n    public search = (text$: Observable<string>) =>\r\n        text$.pipe(\r\n            debounceTime(200),\r\n            map((term: string) => term === '' ? []\r\n                : this.propertyResults.filter(v => v.translatedProperty.toLowerCase()\r\n                    .indexOf(term.toLowerCase()) > -1).slice(0, 10))\r\n    );\r\n    public formatter = (x: {translatedProperty: string}) => x.translatedProperty;\r\n    \r\n     ngOnChanges() {\r\n        // triggered when a button in the UI is pressed\r\n       // call API and store info in `propertyResults`\r\n       this.propertyResults = response from API;\r\n     }\r\n}\r\n```\r\n\r\n### Behaviour\r\nwhen the user enters in the search bar here no suggestion template is rendered\r\n\r\n![grafik](https://user-images.githubusercontent.com/12070966/41053204-2d59359e-69bb-11e8-93e2-3f8107f5cd56.png)\r\n\r\nWhen the user presses <kbd>Tab</kbd> key the autocomplete is achieved\r\n\r\n![grafik](https://user-images.githubusercontent.com/12070966/41053281-5fa66b20-69bb-11e8-8b9f-8760f7ace4cf.png)\r\n\r\n### Link to minimally-working plunker that reproduces the issue:\r\nOn the contrary, I first created a [StackBlitz](https://stackblitz.com/edit/ng-bootstrap-workflow-test) which provides the desired result and then used the code in my application. The code on stackblitz works perfect but it doesn't in my application.\r\n\r\n### Checks \r\n\r\nBrowser: Mozilla FireFox 60.0.1\r\n\r\nThe inspector provides the following when anything is typed within the search bar:\r\n![grafik](https://user-images.githubusercontent.com/12070966/41053407-b24d1626-69bb-11e8-8567-2ab997d960b5.png)\r\n\r\n`ngb-typeahead-window` is grayed out.\r\n\r\n### Version of Angular, ng-bootstrap, and Bootstrap:\r\n\r\nAngular:  `5.2.x`\r\n\r\nng-bootstrap: `1.1.x`\r\n\r\nBootstrap: `4.0-alpha.6`\r\n"},"comment":{"url":"https://api.github.com/repos/ng-bootstrap/ng-bootstrap/issues/comments/395840409","html_url":"https://github.com/ng-bootstrap/ng-bootstrap/issues/2437#issuecomment-395840409","issue_url":"https://api.github.com/repos/ng-bootstrap/ng-bootstrap/issues/2437","id":395840409,"node_id":"MDEyOklzc3VlQ29tbWVudDM5NTg0MDQwOQ==","user":{"login":"shantanoo-desai","id":12070966,"node_id":"MDQ6VXNlcjEyMDcwOTY2","avatar_url":"https://avatars1.githubusercontent.com/u/12070966?v=4","gravatar_id":"","url":"https://api.github.com/users/shantanoo-desai","html_url":"https://github.com/shantanoo-desai","followers_url":"https://api.github.com/users/shantanoo-desai/followers","following_url":"https://api.github.com/users/shantanoo-desai/following{/other_user}","gists_url":"https://api.github.com/users/shantanoo-desai/gists{/gist_id}","starred_url":"https://api.github.com/users/shantanoo-desai/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/shantanoo-desai/subscriptions","organizations_url":"https://api.github.com/users/shantanoo-desai/orgs","repos_url":"https://api.github.com/users/shantanoo-desai/repos","events_url":"https://api.github.com/users/shantanoo-desai/events{/privacy}","received_events_url":"https://api.github.com/users/shantanoo-desai/received_events","type":"User","site_admin":false},"created_at":"2018-06-08T18:00:20Z","updated_at":"2018-06-08T18:00:20Z","author_association":"NONE","body":"Closing the Issue as the platform now uses `Bootstrap 4.1.1` and the suggestion template is displayed. "}}
{"actor":{"display_login":"shantanoo-desai"}}