一个简单的Angular search UI实现

搜索框通过Input控件实现：

import {Component, EventEmitter, OnInit, Output} from '@angular/core';@Component({selector: 'app-search-input',templateUrl: './search-input.component.html',styleUrls: ['./search-input.component.css']
})
export class SearchInputComponent implements OnInit {isSearching = true;// 通过EventEmitter发送一个事件，参数类型为string@Output() searchEventEmitter = new EventEmitter<string>();bookName: string;constructor() { }ngOnInit() {// this.searchEventEmitter.emit('jerry');}}

html：把Input field的值(ngModel)通过searchEventEmitter.emit发送出去：

在消费这个Component的html处：

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

一个简单的Angular search UI实现相关推荐

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表（一）
iOS开发UI篇-使用UItableview完成一个简单的QQ好友列表(一) 一.项目结构和plist文件二.实现代码 1.说明: 主控制器直接继承UITableViewController // ...
iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局
iOS开发UI篇-使用xib自定义UItableviewcell实现一个简单的团购应用界面布局 iOS开发UI篇-使用xib自定义UItableviewcell实现一个简单的团购应用界面布局一.项目 ...
iOS开发UI篇—使用嵌套模型完成的一个简单汽车图标展示程序
iOS开发UI篇-使用嵌套模型完成的一个简单汽车图标展示程序一.plist文件和项目结构图说明:这是一个嵌套模型的示例二.代码示例: YYcarsgroup.h文件代码: 1 //2 // YY ...
用angular JS和 bootstrap完成一个简单的购物车界面
初学angularJS,自己做一个简单的demo玩一下. 购物车界面:(1)能显示商品基本信息: (2)能对购买数量进行修改: (3)能够删除不想购买的商品: (4)能够自动计 ...
php ci框架后台管理,ci: 羽翼后台管理平台是一个简单的博客系统，后端基于CodeIgniter，前端基于Semantic UI 2.2.10...
羽翼后台管理平台(博客系统) 羽翼的由来羽翼的故事是9月20日的晚上,我突然就想到--造翼者小说.我通过自己构思不少的东西.羽毛代表着轻松.纯洁和神圣的:翼代表着升天和梦想,两者在一起的含义:带着一 ...
如何使用装饰器创建一个简单的UI库
目录概念设置项目创建装饰器基类完成笑脸元素下一步是什么? 下载最新源(GitHub) 下载Tiny概念概念下面的代码揭示了我脑海中的概念.它表示一个简单的Web组件,可根据输入显示不同 ...
在vue中element ui 结合frappe-gantt实现一个简单的甘特图功能
在vue中创建甘特图步骤请参考: https://editor.csdn.net/md/?articleId=130145782 2. 结合element ui 实现甘特图功能实现效果: 2.1 下 ...
Android UI开发: 横向ListView(HorizontalListView)及一个简单相册的完整实现 (附源码下载)
本文内容: 1.横向ListView的所有实现思路; 2.其中一个最通用的思路HorizontalListView,并基于横向ListView开发一个简单的相册: 3.实现的横向ListView在点击 ...
java qq ui界面_java swing 创建一个简单的QQ界面教程
记录自己用java swing做的第一个简易界面. LoginAction.java package com.QQUI0819; import javax.swing.*; import java.a ...

一个简单的Angular search UI实现

一个简单的Angular search UI实现相关推荐

最新文章

热门文章