Snippet for @input @output as Observable for Angular (VSCode Cmd+P > Snippets: Configure User Snippets)

typescript.json

"@Input Observable for Angular": {
		"prefix": "in$",
		"description": "Create an Observable @Input",
		"body": [
			"#${1:prop} = new BehaviorSubject<${2:type}|undefined>(undefined);",
			"protected ${1:prop}\\$ = this.#${1:prop}.pipe(filter(p=>p!==undefined));",
			"@Input() set ${1:prop}(value: ${2:type}) {",
			"\t$0//if (value!==this.${1:prop}) //eventual validation logic",
			"\tthis.#${1:prop}.next(value);",
			"}",
			"get ${1:prop}(): ${2:type}|undefined {",
			"\treturn this.#${1:prop}.getValue();",
			"}"
		]
	},
"@Output Observable for Angular [(two-way)] ": {
		"prefix": "out$",
		"description": "Create an Observable @Output for [(two-way)]",
		"body": ["@Output() ${1:prop}Change=this.${1:prop}\\$.pipe(distinctUntilChanged());$0"]
	},
"[(two-way)] Observable for Angular": {
		"prefix": "two$",
		"description": "Create @Input+@Output Observable for [(two-way)]",
		"body": [
			"#${1:prop} = new BehaviorSubject<${2:type}|undefined>(undefined);",
			"protected ${1:prop}\\$ = this.#${1:prop}.asObservable().pipe(filter(p=>p!==undefined));",
			"@Input() set ${1:prop}(value: ${2:type}) {",
			"\tthis.#${1:prop}.next(value);",
			"}",
			"get ${1:prop}(): ${2:type}|undefined {",
			"\treturn this.#${1:prop}.getValue();",
			"}",
			"@Output() ${1:prop}Change=this.${1:prop}\\$.pipe(distinctUntilChanged());$0"
		]
	}