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 and access it from the parent class using @ViewChild(). Example With a plunker: @Directive({ selector:'[my-custom-directive]’, exportAs:’customdirective’ //the name of the variable to access … Read more
You can access the parent scope by using $parent <div class=”row-fluid” ng-repeat=”message in messages.current|filter:’draft'”> {{ message.subject }} … {{ $parent.campaign.name }} … </div>
You can solve your problem using child routes. See working demo at https://angular-multi-layout-example.stackblitz.io/ or edit at https://stackblitz.com/edit/angular-multi-layout-example Set your route like below const appRoutes: Routes = [ // Site routes goes here { path: ”, component: SiteLayoutComponent, children: [ { path: ”, component: HomeComponent, pathMatch: ‘full’}, { path: ‘about’, component: AboutComponent } ] }, // … Read more
you need to include tr as well in selector like below, @Component({ selector: ‘tr[my-component]’, template: ` <td>{{data1.prop1}}</td> <td>{{data1.prop2}}</td> <td>{{data2.prop1}}</td> ` }) export class MyComponent { @Input() data1; @Input() data2; } Check this Plunker!!
There you don’t need to use this.requests= when you are making get call(then requests will have observable subscription). You will get a response in observable success so setting requests value in success make sense(which you are already doing). this._http.getRequest().subscribe(res=>this.requests=res); If it still shows an error related to type, add any/RelevantModel type on subscribe parameter object. … Read more
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( ‘DETAILS’)”></div> and css .overview { ::ng-deep { … Read more
Template reference variables are scoped to the template they are defined in. A structural directive creates a nested template and, therefore, introduces a separate scope. So you can just use one variable for your template reference <div *ngFor=”let member of members”> <ng-template #popupContent>Hello, <b>{{member.name}}</b>!</ng-template> <button type=”button” class=”btn btn-secondary” [ngbPopover]=”popupContent” popoverTitle=”Fancy content”> I’ve got markup and … Read more
Angular 4 and 5: Using else: <div *ngIf=”isValid;else other_content”> content here … </div> <ng-template #other_content>other content here…</ng-template> You can also use then else: <div *ngIf=”isValid;then content else other_content”>here is ignored</div> <ng-template #content>content here…</ng-template> <ng-template #other_content>other content here…</ng-template> Or then alone: <div *ngIf=”isValid;then content”></div> <ng-template #content>content here…</ng-template> Demo: Plunker Details: <ng-template>: is Angular’s own implementation of … Read more
The hidden property can be used for that [hidden]=”!myVar” See also https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden issues hidden has some issues though because it can conflict with CSS for the display property. See how some in Plunker example doesn’t get hidden because it has a style :host {display: block;} set. (This might behave differently in other browsers – I … Read more
Angular version 2+ provides several ways to add classes conditionally: type one [class.my_class] = “step === ‘step1′” type two [ngClass]=”{‘my_class’: step === ‘step1’}” and multiple option: [ngClass]=”{‘my_class’: step === ‘step1’, ‘my_class2’ : step === ‘step2’ }” type three [ngClass]=”{1 : ‘my_class1’, 2 : ‘my_class2’, 3 : ‘my_class4’}[step]” type four [ngClass]=”step == ‘step1’ ? ‘my_class1’ : … Read more