angular-template

How to manage with Angular2 a form who hold an undefined number of field ? In my case, I need to create a from where user can add and delete some block of fileds. It's like an address book where user can add one or ten address. And each address had a some fields like street, street number and so on. My look like this : let address = fb.group({ street: fb.control(null, Validators.required), streetNumber fb.control(null, Validators.required) }); this.userForm = fb.group({ name: fb.control(null, Validators.required), firstName: fb.control(null, Validators.required), address: fb.group({ 1: address

If I have the following: <div *ngIf="user$ | async as user" class="container"> <p>user.name</p> </div> Is there a way I can execute code when the div above finally appears on screen? The ngIf will remove that DOM element and all attached components/directives. So you can just write a simple directive that executes an event when it's first created. When the ngIf transitions from false to true the directive will be created (again, and again, etc...) @Directive({selector: '[after-if]'}) export class AfterIfDirective implements AfterContentInit { @Output('after-if') public after: EventEmitter

I'm trying to create a library of shared Angular components to use across a number of different web projects. Along with the shared component library, I'm trying to create a web project that contains and displays all of those components and code examples as to how to use them. As seen from other queries related to a similar question, in order to display HTML code in a webpage in in <pre> or <code> tags, certain aspects of those HTML snippets need to have HTML encoded characters(i.e. > needs to be > , < needs to be < ). The need to make these changes by hand from the source code can be quite

Here is the label code: import {Directive} from '@angular/core'; @Directive({ selector: '[ngbButtonLabel]', host: {'[class.btn]': 'true', '[class.active]': 'active', '[class.disabled]': 'disabled', '[class.focus]': 'focused'} }) export class NgbButtonLabel { active: boolean; disabled: boolean; focused: boolean; } and here is the radio button code: import {Directive, forwardRef, Input, Renderer2, ElementRef, OnDestroy} from '@angular/core'; import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms'; import {NgbButtonLabel} from './label'; const NGB_RADIO_VALUE_ACCESSOR = { provide:

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>small rubber</td></tr> </table> The first level is easy: <table> <tr *ngFor="#group of groups"> <td><h1>{

This question already has an answer here: How can I select an element in a component template? 10 answers In Angular 2, I have a component that has a child component. However, I want to acquire a copy of that child component to use in the parent, to call its functions or whatever. I found out that I could use local variables, and that way I will be able to use the component in the template. However, I don't to only use it in the template, I want to use it in the actual code of the component. I found a way to do that, here is the child code: //our child import {Component, OnInit, EventEmitter}

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 footer is different from the marketing site header and footer) routes : ['dashboard','profile'] I run the