### File

`projects/app-base-library/src/lib/angular/modules/drupal/components/node.component.ts`

### Extends

`Node`

### Implements

`OnChanges`

### Metadata

selector | `ab-drupal-entity-node`

template

    <article *ngIf="data" id="node-{{ data.attributes.nid }}"
             class="node node--type-{{ data.type.split('--')[1] }} node--view-mode-full clearfix">

        <header>
            <h2 class="title node__title">{{ data.attributes.title }}</h2>
        </header>

        <div [ngSwitch]="data.type.split('--')[1]" class="node__content clearfix">

            <div *ngIf="data.relationships['field_icon'] && data.relationships['field_icon'].data" class="field field--name-icon">
                <!--<div>{{data.relationships['field_icon'].data.id}}</div>-->
                <img [src]="drupalService.siteParams.base_root + drupalService.model.entities[data.relationships['field_icon'].data.id].data.attributes.url"/>
            </div>

            <div *ngIf="data.attributes.body" [innerHTML]="data.attributes.body.valueSafe" class="field field--name-body"></div>

            <ng-container *ngIf="data.relationships['field_image']">
                <div *ngFor="let item of data.relationships['field_image'].data" class="field field--name-image">
                    <div class="meta title">{{item.meta.title}}</div>
                    <img [src]="drupalService.siteParams.base_root + drupalService.model.entities[item.id].attributes.url"/>
                </div>
            </ng-container>

            <ng-container *ngSwitchCase="'iframe'">
                <div class="field field--name-iframe">
                    <iframe [src]="data.attributes.field_iframe.uriSafe" width="{{ data.attributes.field_width }}"
                            height="{{ data.attributes.field_height }}" frameborder="0" style="visibility:hidden;"
                            onload="this.style.visibility='visible';" allowtransparency=”true”></iframe>
                </div>
            </ng-container>

        </div>

    </article>

### Index

###### Properties

- Public sanitizer
- _headers
- _nodeTemplate
- data
- dataRelationships

###### Methods

- ngOnChanges
- Public parse
- Private sanitize
- _createNode
- Private Async _fetchResource
- _json

###### Inputs

- node

### Constructor

`constructor(drupalService: DrupalService, sanitizer: DomSanitizer)`
Defined in projects/app-base-library/src/lib/angular/modules/drupal/components/node.component.ts:46

Parameters :

Name | Type | Optional
drupalService | `DrupalService` | no
sanitizer | `DomSanitizer` | no

### Inputs

`node` | Type: `any`
Defined in projects/app-base-library/src/lib/angular/modules/drupal/components/node.component.ts:46

### Methods

ngOnChanges
`ngOnChanges(changes: )`
Defined in projects/app-base-library/src/lib/angular/modules/drupal/components/node.component.ts:53

Parameters :

Name | Optional
changes | no

Returns : `void`

Public parse
`parse(node: )`
Defined in projects/app-base-library/src/lib/angular/modules/drupal/components/node.component.ts:74

Parameters :

Name | Optional
node | no

Returns : `void`

Private sanitize
`sanitize(data: )`
Defined in projects/app-base-library/src/lib/angular/modules/drupal/components/node.component.ts:62

Parameters :

Name | Optional
data | no

Returns : `void`

_createNode
`_createNode(nodeObject: any)`
Inherited from `Node`
Defined in Node:36

Parameters :

Name | Type | Optional | Default value
nodeObject | `any` | no | `this._nodeTemplate`

Returns : `any`

Private Async _fetchResource
`_fetchResource(url: string, params: any)`
Inherited from `Node`
Defined in Node:48

Parameters :

Name | Type | Optional | Default value
url | `string` | no |
params | `any` | no | `undefined`

Returns : `{}`

_json
`_json()`
Inherited from `Node`
Defined in Node:44
Returns : `any`

### Properties

Public sanitizer
`sanitizer: `DomSanitizer``
Type : `DomSanitizer`
Defined in projects/app-base-library/src/lib/angular/modules/drupal/components/node.component.ts:48

_headers
`_headers: `object``
Type : `object`
Default value : `{ 'Accept': 'application/vnd.api+json', 'Content-Type': 'application/vnd.api+json' }`
Inherited from `Node`
Defined in Node:7

_nodeTemplate
`_nodeTemplate: `object``
Type : `object`
Default value : `{ data: { type: "node--page", attributes: { "title": "new: node--page", // "langcode": "en", // "status": true, // "promote": false, // "sticky": false, // "default_langcode": true, "body": { "value": "new: node--page: body", // "format": "full_html", // "summary": "" } } } }`
Inherited from `Node`
Defined in Node:12

data
`data: `any``
Type : `any`
Inherited from `Node`
Defined in Node:5

dataRelationships
`dataRelationships: `object``
Type : `object`
Default value : `{}`
Inherited from `Node`
Defined in Node:6

    import {Component, Input, OnChanges} from '@angular/core';
    import {BrowserModule,DomSanitizer} from '@angular/platform-browser';
    import {Node} from '../../../../shared/cms/drupal/entities/node';
    import {DrupalService} from '../drupal.service';

    @Component({
        selector: 'ab-drupal-entity-node',
        template: `
            <article *ngIf="data" id="node-{{ data.attributes.nid }}"
                     class="node node--type-{{ data.type.split('--')[1] }} node--view-mode-full clearfix">

                <header>
                    <h2 class="title node__title">{{ data.attributes.title }}</h2>
                </header>

                <div [ngSwitch]="data.type.split('--')[1]" class="node__content clearfix">

                    <div *ngIf="data.relationships['field_icon'] && data.relationships['field_icon'].data" class="field field--name-icon">
                        <!--<div>{{data.relationships['field_icon'].data.id}}</div>-->
                        <img [src]="drupalService.siteParams.base_root + drupalService.model.entities[data.relationships['field_icon'].data.id].data.attributes.url"/>
                    </div>

                    <div *ngIf="data.attributes.body" [innerHTML]="data.attributes.body.valueSafe" class="field field--name-body"></div>

                    <ng-container *ngIf="data.relationships['field_image']">
                        <div *ngFor="let item of data.relationships['field_image'].data" class="field field--name-image">
                            <div class="meta title">{{item.meta.title}}</div>
                            <img [src]="drupalService.siteParams.base_root + drupalService.model.entities[item.id].attributes.url"/>
                        </div>
                    </ng-container>

                    <ng-container *ngSwitchCase="'iframe'">
                        <div class="field field--name-iframe">
                            <iframe [src]="data.attributes.field_iframe.uriSafe" width="{{ data.attributes.field_width }}"
                                    height="{{ data.attributes.field_height }}" frameborder="0" style="visibility:hidden;"
                                    onload="this.style.visibility='visible';" allowtransparency=”true”></iframe>
                        </div>
                    </ng-container>

                </div>

            </article>
        `
    })
    export class NodeComponent extends Node implements OnChanges {
        @Input() node: any;

        constructor(private drupalService: DrupalService, public sanitizer: DomSanitizer) {
        // constructor(public sanitizer: DomSanitizer) {
            super();
        }

        ngOnChanges(changes) {
            if (!this.node) {
                return;
            }
            this.data = this.node.data;
            this.sanitize(this.node.data);
            this.parse(this.node);
        }

        private sanitize(data) {
            if (!data) {
                return;
            }
            if (data.attributes.body) {
                data.attributes.body.valueSafe = this.sanitizer.bypassSecurityTrustHtml(data.attributes.body.value);
            }
            if (data.attributes.field_iframe) {
                data.attributes.field_iframe.uriSafe = this.sanitizer.bypassSecurityTrustResourceUrl(data.attributes.field_iframe.uri);
            }
        }

        public parse(node) {
            // switch (node.data.type.split('--')[1]) {
            //     case 'app':
            //         // this.nodeData = JSON.parse(node.field_json[0].value);
            //         break;
            //     case 'iframe':
            //         // code block
            //         break;
            //     default:
            //     // code block
            // }
        }

        // public relationship(field: string) {
        //     let items = [];
        //     if(!this.data.relationships && !this.data.relationships[field]) {
        //         return items;
        //     }
        //     if (this.data.relationships[field]) {
        //         this.data.relationships[field].data.forEach((object,i) => {
        //             items.push(object)
        //         });
        //     }
        //     console.log(items);
        //     return items;
        // }

    }

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""