Make simple <md-chip> work without <md-chips> in AngularJS Material?

Make simple <md-chip> work without <md-chips> in AngularJS Material?

I’m using AngularJS Material v1.1.1.
I’m finding a way to use simple <md-chip> without <md-chips>.

Here is an easy way in Vue Material: https://codesandbox.io/s/lyoqv4l0z?module=App.vue

1
<md-chip class="md-primary" md-deletable>Deletable</md-chip>

But I can not find the similiar way in AngularJS Material document.
https://material.angularjs.org/latest/api/directive/mdChip

Here is my code:
https://codepen.io/iMaeGoo/pen/EJaaqp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body ng-app="myApp" ng-controller="AppCtrl">
<p>
<md-chips ng-model="chips">
<md-chip-template>
{{ $chip }}
</md-chip-template>
</md-chips>
</p>

<p>
<!-- I want to make this simple md-chip work here -->
<md-chip>{{oneChip}}</md-chip>
</p>
</body>
1
2
3
4
angular.module('myApp',['ngMaterial']).controller('AppCtrl', function($scope) {
$scope.chips = ["A chip in chips!"];
$scope.oneChip = "A chip without chips!";
});

One workaround is to rewrite CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
md-chips {
md-chips-wrap {
border: none;
padding: 0;
box-shadow: none;
cursor: inherit;
width: fit-content;

._md-chip-input-container {
display: none;
}
}

md-chip {
margin: 0;
}
}
1
2
3
<md-chips class="chips" ng-model="chips" md-max-chips="1">
<md-chip-template>{{ $chip }}</md-chip-template>
</md-chips>
1
2
3
angular.module('myApp', ['ngMaterial']).controller('AppCtrl', function($scope) {
$scope.chips = ["One chip"];
});

See: https://codepen.io/iMaeGoo/pen/BEyKem

The chip is still in chips component. It is not a good idea.

Feel free to answer if you have better idea!
https://stackoverflow.com/questions/55455225/how-to-make-simple-md-chip-work-without-md-chips-in-angularjs-material

Comments

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×