{"id":2948,"date":"2019-11-28T12:01:18","date_gmt":"2019-11-28T11:01:18","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=2948"},"modified":"2019-11-28T12:01:19","modified_gmt":"2019-11-28T11:01:19","slug":"angular-blokker-component","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/angular-blokker-component\/","title":{"rendered":"Angular Blokker component"},"content":{"rendered":"\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import { Component, Input, ElementRef } from \"@angular\/core\";\nimport { ScriptAnimations } from \"src\/app\/helpers\/ScriptAnimations\";\n@Component({\n    selector: \"app-blokker\",\n    templateUrl: \".\/blokker.component.html\",\n    styleUrls: [\".\/blokker.component.less\"]\n})\nexport class BlokkerComponent {\n    private _visible = false;\n    @Input()\n    set visible(value: boolean) {\n        if (value != this._visible)\n        {\n            this._visible = value;\n            this.animateVisible();\n        }\n    }\n    get visible() {\n        return this._visible;\n    }\n    constructor(private _element: ElementRef)\n    {\n    }\n    animateVisible()\n    {\n        if (this.visible) {\n            ScriptAnimations.animateFadeIn(this._element, 200);\n        } else {\n            ScriptAnimations.animateFadeOut(this._element, 200);\n        }\n    }\n}<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"inner\">\n    &lt;i class=\"fas fa-cog fa-spin\">&lt;\/i>\n&lt;\/div><\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">:host {\n    position:absolute;\n    top:0;left:0;\n    width: 100%;height:100%;\n    background-color: rgba(0.9,0.9,0.9,0.1);\n    box-shadow: 0 0 2px 2px rgba(0.9,0.9,0.9,0.1);\n}\n.inner {\n    position:absolute;\n    top:50%;left:50%;\n    transform: translate(-50%, -50%);\n    font-size: 120px;\n    color: #ffffff;\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2948","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/2948","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=2948"}],"version-history":[{"count":1,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/2948\/revisions"}],"predecessor-version":[{"id":2949,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/2948\/revisions\/2949"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=2948"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=2948"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=2948"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}