Andreas Siivola Banttu

## mq-if.directive.ts
import { Input, Directive, TemplateRef, ViewContainerRef, OnDestroy } from '@angular/core';
/**
 * How to use this directive?
 *
 * ```
 * <div *mqIf="'(min-width: 500px)'">
 *     Div element will exist only when media query matches, and created/destroyed when the viewport size changes.
 * </div>
 * ```
 */

## flatpickr.component.html
<button (click)="toggle()">Date</button>
<div [hidden]="!visible">
  <div #flatpickr></div>
</div>
	import { Input, Directive, TemplateRef, ViewContainerRef, OnDestroy } from '@angular/core';
	/**
	* How to use this directive?
	*
	* ```
	* <div *mqIf="'(min-width: 500px)'">
	* Div element will exist only when media query matches, and created/destroyed when the viewport size changes.
	* </div>
	* ```
	*/
	<button (click)="toggle()">Date</button>
	<div [hidden]="!visible">
	<div #flatpickr></div>
	</div>