Skip to content

Instantly share code, notes, and snippets.

<template>
<button class="button">{{text}}</button>
</template>
<script>
export default {
name: "Button",
props: {
text: {
type: String,
<template>
<button class="button">{{text}}</button>
</template>
<script>
export default {
name: "Button",
props: {
text: {
type: String,
<template>
<button class="button">{{text}}</button>
</template>
<script>
export default {
name: "Button",
props: {
text: {
type: String,
<template>
<input type="text" :value="maskedValue" :ref="'inputRef'" @input="handleInput($event)">
</template>
<script>
export default {
name: "Input",
model: {
prop: "hiddenValue",
event: "blur"
<template>
<div class="hello">
<h1>{{ title }}</h1>
<Input v-model="inputVal"/> // Find the usage of "Input" component
</div>
</template>
<script>
<template>
<input type="text" :value="hiddenValue" :ref="'inputRef'" @input="handleInput($event)">
</template>
<script>
export default {
name: "Input",
model: {
prop: "hiddenValue",
event: "blur"
// This variable will hold the reference to the document's click handler
let handleOutsideClick
// Difining clickoutside globally for the application
// so it will be used across all the components
Vue.directive('clickoutside', {
// bind the logic to the html element
bind (el, binding, vnode) {
// Here's the click/touchstart handler
// (it is registered below)
<template>
<div id="app">
<div>
<button
ref="btn1"
class="toggle-button"
>
Open Country Popup
</button>
<div
import { MovieStore } from './../movie.store';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-read-movie',
templateUrl: './read-movie.component.html',
styleUrls: ['./read-movie.component.css']
})
export class ReadMovieComponent implements OnInit {
public movieList: any;
import { ADD_MOVIE } from './../movie.actions';
import { MovieReducers } from './../movie.reducer';
import { MovieStore } from './../movie.store';
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
@Component({
selector: 'app-create-movie',
templateUrl: './create-movie.component.html',
styleUrls: ['./create-movie.component.css']
})