angular-template

Best method to set different layout for different pages in angular 4

由 南笙酒味 提交于 2019-11-27 09:09:31
问题 I am new to angular 4. What I'm trying to achieve is to set different layout headers and footers for different pages in my app. I have three different cases: Login, register page (no header, no footer) routes: ['login','register'] Marketing site page (this is the root path and it has a header and footer, mostly these sections come before login) routes : ['','about','contact'] App logged in pages (I have a different header and footer in this section for all the app pages but this header and

Remove host component tag from html in angular 4

由 烈酒焚心 提交于 2019-11-27 08:54:19
I have a table in which I want to display a table row, which is a component. And also I want to pass data to that component: <table> <th> <td>col 1</td> <td>col 2</td> <td>col 3</td> </th> <tr> <my-component [data1]="data1" [data2]="data2"></my-component> </tr> <tr *ngFor="let item of list"> {{item}} </tr> </table> In my-component , the HTML is a few <td></td> with data rendered from data1 and data2 . But after rendering it, because of <my-component></my-component> my CSS is breaking resulting in all my-component HTML (whole table row) displaying in 1st column. Result of above: <table> <th>

How and where to use ::ng-deep?

由 假装没事ソ 提交于 2019-11-27 03:57:05
I'm new to Angular 4, so could anyone please explain how and where to use ::ng-deep in Angular 4? Actually I want to overwrite some of the CSS properties of the child components from the parent components. Moreover is it supported on IE11? Usually /deep/ “shadow-piercing” combinator can be used to force a style down to child components . This selector had an alias >>> and now has another one called ::ng-deep. since /deep/ combinator has been deprecated, it is recommended to use ::ng-deep For example: <div class="overview tab-pane" id="overview" role="tabpanel" [innerHTML]="project?.getContent(

How to use Angular2 templates with *ngFor to create a table out of nested arrays?

由 妖精的绣舞 提交于 2019-11-27 02:33:50
问题 Given the following array in component property groups : [ { "name": "pencils", "items": ["red pencil","blue pencil","yellow pencil"] }, { "name": "rubbers", "items": ["big rubber","small rubber"] }, ] How to create a html table with all items, each in one row? The expected HTML result: <table> <tr><td><h1>pencils</h1></td></tr> <tr><td>red pencil</td></tr> <tr><td>blue pencil</td></tr> <tr><td>yellow pencil</td></tr> <tr><td><h1>rubbers</h1></td></tr> <tr><td>big rubber</td></tr> <tr><td

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays

由 我怕爱的太早我们不能终老 提交于 2019-11-26 22:20:02
I looked at similar questions, but none of them helped me. I am going to receive an object like the following: [ { "id": 1, "name": "Safa", "email": "neerupeeru@mail.ee", "purpose": "thesis", "programme": "Software Engineering", "year": 2016, "language": "Estonian", "comments": "In need of correcting a dangling participle.", "status": "RECEIVED" }, { "id": 2, "name": "Safa", "email": "neerupeeru@mail.ee", "purpose": "thesis", "programme": "Software Engineering", "year": 2016, "language": "Estonian", "comments": "In need of correcting a dangling participle.", "status": "RECEIVED" }, { "id": 3,

Angular2, evaluate template from string inside a component

由 浪子不回头ぞ 提交于 2019-11-26 20:43:39
问题 It's possible evaluate template from string in a variable?. I need place the string in the component instead of the expression, e.g. template: "<div>{{ template_string }}</div>" template_string contains: <b>{{ name }}</b> and all should be evaluated to <div><b>My Name</b></div> but I see <div>{{ template_string }}</div> I need something like {{ template_string | eval }} or something else to evaluate the content of the variable on current context. It's possible? I need something to use this

Get reference to a directive used in a component

由 我是研究僧i 提交于 2019-11-26 15:44:35
问题 I have a component whose template looks something like this: <div [my-custom-directive]>Some content here</div> I need access to the MyCustomDirective class instance used here. When I want to get access to a child component, I use a ViewChild query. Is there an equivalent feature to get access to a child directive? 回答1: You can use exportAs property of the @Directive annotation. It exports the directive to be used in the parent view. From the parent view, you can bind it to a view variable

Pass parent scope value into ng-repeat loop in Angular

由 为君一笑 提交于 2019-11-26 15:43:44
问题 This should be an extremely simple question, but all of the workarounds I've found are complex. I'm looping through an array of objects in using ng-repeat in a template as follows: <div class="row-fluid" ng-repeat="message in messages.current|filter:'draft'"> {{ message.subject }} ... {{ campaign.name }} ... </div> Since the ng-repeat creates a new scope, the 'campaign' object from the controller doesn't seem to be accessable. Is there any way (aside from adding the campaign object to every

Dynamic template reference variable inside ngFor (Angular 2)

由 自闭症网瘾萝莉.ら 提交于 2019-11-26 15:26:41
How to declare a dynamic template reference variable inside a ngFor element? I want to use the popover component from ng-bootstrap, the popover code (with Html binding) is as shown: <ng-template #popContent>Hello, <b>{{name}}</b>!</ng-template> <button type="button" class="btn btn-secondary" [ngbPopover]="popContent" popoverTitle="Fancy content"> I've got markup and bindings in my popover! </button> How can I wrap those elements inside ngFor ? <div *ngFor="let member of members"> <!-- how to declare the '????' --> <ng-template #????>Hello, <b>{{member.name}}</b>!</ng-template> <button type=

How and where to use ::ng-deep?

由 别来无恙 提交于 2019-11-26 12:26:01
问题 I\'m new to Angular 4, so could anyone please explain how and where to use ::ng-deep in Angular 4? Actually I want to overwrite some of the CSS properties of the child components from the parent components. Moreover is it supported on IE11? 回答1: Usually /deep/ “shadow-piercing” combinator can be used to force a style down to child components . This selector had an alias >>> and now has another one called ::ng-deep. since /deep/ combinator has been deprecated, it is recommended to use ::ng
订阅 angular-template