Questions tagged [angular-template]

Use this tag for Angular questions which are related to templates topics, such as interpolation ({{...}}), template expressions, template statements, data-binding...

The Angular application manages what the user sees and can do, achieving this through the interaction of a component class instance (the component) and its user-facing template.

In Angular, the component plays the part of the controller/viewmodel, and the template represents the view.

To find more information :

674 questions
47
votes
4 answers

How to style ng-content

Am following this tutorial on transclusion https://scotch.io/tutorials/angular-2-transclusion-using-ng-content However there is no mention on how to style elements that end up replacing ng-content. It seems that I can only target those element in…
user1275105
  • 2,643
  • 5
  • 31
  • 45
47
votes
3 answers

Pass parent scope value into ng-repeat loop in Angular

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:
Wandering Digital
  • 1,788
  • 2
  • 21
  • 27
45
votes
2 answers

Angular io (4) *ngFor first and last

I am trying to tell whether an item in an *ngFor is the first or last element to style a container. Is there a way to do something like this?
Nicholas Fitton
  • 573
  • 1
  • 4
  • 10
42
votes
5 answers

Loading relative templateUrl

I've been trying to find the best way to create a modular, scalable angular application. I really like the structure of projects like angular-boilerplate, angular-app, where all the related files are grouped together by feature for partials and…
40
votes
8 answers

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

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…
Witek
  • 6,160
  • 7
  • 43
  • 63
36
votes
4 answers

Angular 5 - add style to specific element dynamically

I am using Angular 5.2 in my project and new to the angular framework. My component html is looking like this:- I want to add the style="top:200px;" dynamically to the highlighted element with class="app-alerts" in the above screenshot in the…
Karan
  • 3,265
  • 9
  • 54
  • 82
27
votes
1 answer

Remove host component tag from html in angular 4

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: …
AjinkyaBhagwat
  • 683
  • 2
  • 6
  • 18
26
votes
5 answers

Can you prevent an Angular component's host click from firing?

I'm creating an Angular component that wraps a native
23
votes
3 answers

Angular 4 - Show and hide components

I have the next components in the same html file. In…
Eladerezador
  • 1,277
  • 7
  • 25
  • 48
21
votes
2 answers

How to pass context to Angular 5 template from *ngIf

Angular's NgTemplateOutlet allows you to pass a context to the outlet for property binding. Hello…
BeetleJuice
  • 39,516
  • 19
  • 105
  • 165
19
votes
6 answers

Capturing Page Source (HTML Snapshot) After Angular Templating

Quick angular.js question... If I have a webpage with content like this:
{{message}}
And I set the model for 'message' such that $scope.message = "Hello world!" Then on the screen, the contents of the div will display as Hello…
Code Whisperer
  • 22,959
  • 20
  • 67
  • 85
18
votes
4 answers

how to best conditional template show in angular 4

currently, i am practiced angular 4. when a normal user view this then show public content When A Registered user enter the web page then show edit or some content. how to the best practices show conditionally template Or Some Html Contents…
Md. Abu Sayed
  • 2,396
  • 2
  • 18
  • 26
18
votes
2 answers

Event to fire when an angular *ngIf statement evaluates in template

If I have the following:

{{user.name}}

Is there a way I can execute code when the div above finally appears on screen?
Sammy
  • 3,395
  • 7
  • 49
  • 95
18
votes
2 answers

Angular pass multiple templates to Component

I'm trying to create a component that accepts multiple templates as inputs. This is the example I have: @Component({ selector: 'data-list', styles: [ require('./data-list.component.scss') ], template: `
Daniel Grima
  • 2,765
  • 7
  • 34
  • 58
17
votes
2 answers

Building a wrapper directive (wrap some content / component) in angular2

I'm pretty new building directives with Angular2. What I want is to create a popup directive that will wrap the content with some css classes. Content Content can be pure text and headers like:

Header

Content to…
Mikkel
  • 1,771
  • 11
  • 35
  • 59
1
2
3
44 45
col 1 col 2 col 3