Angular 4 & Bootstrap 4

E ai galera.

Neste post irei demonstrar como fazer a preparação inicial de uma aplicação que utilize Angular 4 e Bootstrap 4.

Após você instalar o Angular-CLI você pode iniciar sua aplicação angular digitando o comando no cmd:

ng new minha-app

cd minha-app

Após navegar para a pasta de sua app você pode instalar o Bootstrap 4 e o ng-bootstrap. O ng-bootstrap é uma biblioteca que contem componentes bootstrap para angular, fazendo com que não seja necessário adicionar bootstrap.js em nossa aplicação.

npm install --save @ng-bootstrap/ng-bootstrap bootstrap@4.0.0-beta

Com todas instalações realizadas, você deve registrar o css do bootsrap no arquivo angular-cli.json na propriedade styles.

"styles": [
     "../node_modules/bootstrap/dist/css/bootstrap.min.css",
     "styles.css"
 ]

No arquivo app.module.ts deve ser feito importação do módulo do ng-bootstrap o NgbModule.

E por fim você pode começar a utilizar os componentes do ng-bootstrap e os demais elementos com estilo do bootsrap. Como no exemplo de carousel em app.component.html.

Para ver o resultado final digite na sessão do seu terminal:

ng serve --o

Link para github https://github.com/jozimarback/setup-ng-bootstrap

Por hoje é só.
Até a próxima.

Comentários

Postagens mais visitadas deste blog

Dica: Extensão Indentar código VUE Visual Studio Code

Olá Por muitas é necessário um atalho para formatar o seu código fonte no editor de texto. Para formatação de HTML, CSS, JS e afins no visual studio code você pode utilizar o: HTML Snippets Mas esta extensão acima não formata arquivos de template .vue . Para formatar este tipo de arquivos é necessário instalar alguma outra extensão. Entre as que busquei a que faz o serviço da melhor forma atualmente utilizando o atalho alt+shift+f é o plugin ventur: Vetur Este plugin é muito bom mesmo. Facilitou bastante a formatação de fontes em templates .vue. É isso espero que ajude;)

C# :Removendo propriedades nulas ao serializar JSON

Olá Para serializar uma classe em formato JSON em c#,por muitas vezes é utilizado o pacote Newtonsoft . Em alguns momentos há a necessidade de serializar somente as propriedades que estiverem preenchidas no objeto, removendo assim as que estiverem nulas. Para isto você pode utilizar a propriedade NullValueHandling da classe JsonSerializerSettings . Segue exemplo: Até a próxima

Como criar componente dropdown com checkbox ASP.NET MVC

Neste post irei demonstrar a criação de um componente dropdown com checkbox para selecionar as opções desejadas. Para começar podemos criar uma classe estática para criar o componente que será utilizado numa página razor. public static class Extensions { public static MvcHtmlString DropdownCheckbox( this HtmlHelper helper, string placeholder, IEnumerable<SelectListItem> selectList, object htmlAttributes) { string items = "" ; string rodape = "" ; if (htmlAttributes == null ) { htmlAttributes = new { }; } var attributes = new ExpandoObject() as IDictionary< string , Object>; foreach (PropertyInfo property in htmlAttributes.GetType().GetProperties()) { attributes.Add(property.Name, property.GetValue(htmlAttributes)); } string idDropdown = "dr...

Jozimar Back's codding blog

Pesquisar este blog